이제는 개인 블로그를 만드는 것이 아주 일상적인 일이 되어버렸습니다. 하지만 많은 사람들이 블로그를 운영하기 위해 서버와 데이터베이스를 유지하고 관리하는 것은 부담스럽습니다.

이 문제를 해결하기 위해 자바스크립트의 Local Storage를 활용하여 블로그를 간편하게 생성하고 관리하는 방법에 대해 알아보겠습니다.

Local Storage란?

Local Storage는 웹 브라우저에 데이터를 저장하는 기능으로, 사용자가 웹 사이트를 닫았다가 다시 열어도 저장된 데이터를 유지할 수 있습니다. 이는 브라우저별로 저장소 크기가 다를 수 있으며, 텍스트 형식으로만 데이터를 저장할 수 있습니다.

블로그 생성하기

1. HTML 구조 만들기

   <div id="blog">
     <input type="text" id="title" placeholder="제목">
     <textarea id="content" placeholder="내용"></textarea>
     <button id="saveBtn">저장</button>
   </div>
   

2. 스크립트 작성하기

   const saveBtn = document.getElementById("saveBtn");
   
   saveBtn.addEventListener("click", function () {
     const title = document.getElementById("title").value;
     const content = document.getElementById("content").value;
   
     // Local Storage에 데이터 저장
     localStorage.setItem("blogTitle", title);
     localStorage.setItem("blogContent", content);
   
     alert("블로그가 저장되었습니다!");
   });
   

블로그 생성 페이지는 제목과 내용을 입력하는 인풋 박스, 그리고 저장 버튼으로 구성되어 있습니다. 저장 버튼을 클릭하면 입력한 제목과 내용을 Local Storage에 저장하는 기능이 구현됩니다.

블로그 불러오기

블로그 생성이 완료되면, 사용자는 해당 블로그를 언제든지 다시 확인할 수 있어야 합니다. Local Storage에 저장된 데이터를 불러와서 블로그 내용을 화면에 보여주는 방법을 알아보겠습니다.

const savedTitle = localStorage.getItem("blogTitle");
const savedContent = localStorage.getItem("blogContent");

if (savedTitle) {
  document.getElementById("title").value = savedTitle;
}

if (savedContent) {
  document.getElementById("content").value = savedContent;
}

위의 코드는 Local Storage에 저장된 제목과 내용을 불러와서 해당 값이 있을 경우 각각의 인풋 박스에 값을 채워주는 기능입니다. 이를 블로그 수정 페이지에 추가하면 사용자는 블로그를 다시 확인하고 수정할 수 있습니다.

블로그 삭제하기

불필요해진 블로그는 삭제해야 합니다. Local Storage에서 데이터를 삭제하는 방법을 알아보겠습니다.

localStorage.removeItem("blogTitle");
localStorage.removeItem("blogContent");

위의 코드는 Local Storage에서 blogTitle과 blogContent 키를 가진 데이터를 삭제합니다. 이를 블로그 삭제 버튼의 이벤트 리스너에 추가하면, 사용자는 블로그를 삭제할 수 있게 됩니다.

마무리

자바스크립트의 Local Storage를 활용하면 서버와 데이터베이스 없이도 간편하게 블로그를 생성하고 관리할 수 있습니다. 하지만 Local Storage에 저장되는 데이터는 사용자 컴퓨터에 저장되므로, 보안에 민감한 정보를 다루지 않는 것이 중요합니다.

#블로그 #자바스크립트 #로컬스토리지