자바스크립트 Local Storage를 활용한 게시판 애플리케이션 개발

15 Sep 2023

javascript

서론

게시판은 웹 애플리케이션에서 많이 사용되는 기능 중 하나입니다. 사용자들은 게시판을 통해 글을 작성하고, 읽고, 수정하며, 삭제할 수 있습니다. 이번 블로그 게시물에서는 자바스크립트의 Local Storage를 활용하여 간단한 게시판 애플리케이션을 개발하는 방법을 알아보겠습니다.

Local Storage란?

Local Storage는 웹 브라우저에 데이터를 저장할 수 있는 웹 스토리지 기술입니다. 이를 통해 웹 페이지에서 사용하는 데이터를 클라이언트 측에 저장하여 재사용할 수 있습니다. Local Storage는 키-값 쌍으로 데이터를 저장하고, 키를 통해 해당 데이터에 접근할 수 있습니다.

게시판 애플리케이션 개발하기

1. HTML 구조 작성

먼저 HTML 파일을 작성해야 합니다. 다음은 간단한 게시판 애플리케이션의 HTML 구조 예시입니다.

<!DOCTYPE html>
<html>
<head>
  <title>게시판 애플리케이션</title>
</head>
<body>
  <h1>게시판</h1>
  <form id="post-form">
    <input type="text" id="post-title" placeholder="제목">
    <textarea id="post-content" placeholder="내용"></textarea>
    <button type="submit">등록</button>
  </form>
  <ul id="post-list"></ul>
  <script src="app.js"></script>
</body>
</html>

2. 자바스크립트 코드 구현

이제 자바스크립트 코드를 작성하여 게시판 애플리케이션의 동작을 구현해야 합니다. 다음은 Local Storage를 활용하여 게시물을 추가, 불러오기, 삭제하기 위한 기능을 구현한 예시입니다.

// 게시물 추가
function addPost(title, content) {
  let posts = getPostsFromLocalStorage();
  posts.push({ title, content });
  localStorage.setItem("posts", JSON.stringify(posts));
}

// 게시물 불러오기
function getPostsFromLocalStorage() {
  return JSON.parse(localStorage.getItem("posts")) || [];
}

// 게시물 삭제
function deletePost(index) {
  let posts = getPostsFromLocalStorage();
  posts.splice(index, 1);
  localStorage.setItem("posts", JSON.stringify(posts));
}

// 게시물 보여주기
function showPosts() {
  let posts = getPostsFromLocalStorage();
  let postList = document.getElementById("post-list");
  postList.innerHTML = "";
  posts.forEach((post, index) => {
    let li = document.createElement("li");
    li.innerHTML = `<h3>${post.title}</h3><p>${post.content}</p><button onclick="deletePost(${index})">삭제</button>`;
    postList.appendChild(li);
  });
}

// 게시물 등록 이벤트 처리
let postForm = document.getElementById("post-form");
postForm.addEventListener("submit", function(e) {
  e.preventDefault();
  let title = document.getElementById("post-title").value;
  let content = document.getElementById("post-content").value;
  addPost(title, content);
  showPosts();
  postForm.reset();
});

// 초기화
showPosts();

위의 코드 예시에서는 addPost, getPostsFromLocalStorage, deletePost, showPosts 함수와 이벤트 처리를 위한 코드를 구현하였습니다. 이를통해 게시물을 추가, 불러오기, 삭제하기 위한 기능을 사용할 수 있습니다.

마무리

위의 예제를 참고하여 자바스크립트의 Local Storage를 활용하여 게시판 애플리케이션을 개발할 수 있습니다. Local Storage는 클라이언트 측에 데이터를 저장하므로, 세션 유지 등의 다양한 기능을 구현할 수 있습니다. 게시판 외에도 다양한 웹 애플리케이션에 Local Storage를 활용하여 유용한 기능을 개발할 수 있습니다.

#게시판 #로컬스토리지