자바스크립트 Local Storage를 이용한 텍스트 에디터 구현

15 Sep 2023

javascript

이번 포스트에서는 자바스크립트의 Local Storage를 사용하여 간단한 텍스트 에디터를 만드는 방법을 알아보겠습니다. Local Storage는 웹 브라우저에 데이터를 저장하는 기능을 제공하여, 사용자의 데이터를 유지할 수 있게 해줍니다.

HTML 구조 설정

먼저, HTML 구조를 설정해야 합니다. 아래는 간단한 텍스트 에디터를 위한 HTML 코드입니다.

<!DOCTYPE html>
<html>
<head>
  <title>텍스트 에디터</title>
</head>
<body>
  <textarea id="editor"></textarea>
  <button id="save">저장</button>
</body>
</html>

위 코드에서는 <textarea> 요소를 통해 사용자가 텍스트를 입력할 수 있습니다. 또한, 저장 버튼을 클릭하여 입력한 텍스트를 Local Storage에 저장할 수 있습니다.

자바스크립트로 텍스트 저장 및 불러오기

이제 자바스크립트로 텍스트를 저장하고 불러오는 기능을 구현해보겠습니다. 아래는 해당 기능을 위한 자바스크립트 코드입니다.

document.addEventListener("DOMContentLoaded", function() {
  const saveButton = document.getElementById("save");
  const editor = document.getElementById("editor");

  // 저장 버튼 클릭 시
  saveButton.addEventListener("click", function() {
    // 입력한 텍스트 저장
    localStorage.setItem("text", editor.value);
    alert("텍스트가 저장되었습니다.");
  });

  // 페이지 로드 시 저장된 텍스트 불러오기
  if (localStorage.getItem("text")) {
    editor.value = localStorage.getItem("text");
  }
});

위 코드에서는 DOMContentLoaded 이벤트를 사용하여 페이지가 로드되면 자바스크립트 코드가 실행되도록 합니다. saveButton과 editor 요소를 변수로 가져온 후, 저장 버튼 클릭 시 입력한 텍스트를 Local Storage에 저장합니다. 또한, 페이지가 로드될 때 저장된 텍스트가 있다면 이를 불러와 에디터에 표시합니다.

실행 결과 확인

이제 위 코드를 포함한 HTML 파일을 웹 브라우저에서 열어 실행해보면 텍스트를 입력하고 저장 버튼을 클릭하여 텍스트가 Local Storage에 저장되고, 다시 페이지를 로드할 때 저장된 텍스트가 에디터에 표시되는 것을 확인할 수 있습니다.

결론

이번 포스트에서는 자바스크립트의 Local Storage를 이용하여 텍스트 에디터를 구현하는 방법을 알아보았습니다. Local Storage를 사용하면 웹 브라우저에 데이터를 저장하여 사용자가 페이지를 이동하더라도 데이터를 유지할 수 있습니다. 이를 활용하여 다양한 웹 애플리케이션을 개발할 수 있습니다.

#JavaScript #LocalStorage #텍스트에디터