자바스크립트 Local Storage를 이용한 포럼 기능 구현

15 Sep 2023

javascript

이번 기술 블로그에서는 자바스크립트의 Local Storage를 이용하여 간단한 포럼 기능을 구현하는 방법에 대해 알아보겠습니다.

포럼 기능 설계

포럼 기능을 구현하기 위해 다음과 같은 기능을 갖춘 웹페이지를 만들어보도록 하겠습니다.

사용자는 게시물을 작성할 수 있어야 합니다.
작성된 게시물은 웹페이지에 표시되어야 합니다.
사용자는 작성된 게시물을 수정하거나 삭제할 수 있어야 합니다.

Local Storage 활용

Local Storage는 웹 브라우저에 데이터를 영구적으로 저장할 수 있는 기능을 제공합니다. 이를 활용하여 포럼에 필요한 데이터를 저장하고 불러올 수 있습니다. 포럼에는 다음과 같은 데이터가 필요합니다.

게시물 목록: 게시물의 제목, 내용, 작성자 등의 정보를 저장합니다.
게시물 ID: 게시물을 고유하게 식별하기 위한 식별자를 저장합니다.

코드 샘플

아래는 Local Storage를 활용하여 포럼 기능을 구현하는 예제 코드입니다.

// 게시물을 저장하는 함수
function savePost(post) {
  // 게시물 ID 생성
  const postId = Date.now().toString();

  // 게시물 저장
  localStorage.setItem(postId, JSON.stringify(post));

  // 게시물 ID 목록에 추가
  const postIds = JSON.parse(localStorage.getItem('postIds')) || [];
  postIds.push(postId);
  localStorage.setItem('postIds', JSON.stringify(postIds));
}

// 게시물 목록을 불러오는 함수
function getPosts() {
  const postIds = JSON.parse(localStorage.getItem('postIds')) || [];
  const posts = [];

  postIds.forEach((postId) => {
    const post = JSON.parse(localStorage.getItem(postId));
    posts.push(post);
  });

  return posts;
}

// 게시물을 수정하는 함수
function updatePost(postId, updatedPost) {
  localStorage.setItem(postId, JSON.stringify(updatedPost));
}

// 게시물을 삭제하는 함수
function deletePost(postId) {
  localStorage.removeItem(postId);

  const postIds = JSON.parse(localStorage.getItem('postIds')) || [];
  const updatedPostIds = postIds.filter((id) => id !== postId);
  localStorage.setItem('postIds', JSON.stringify(updatedPostIds));
}

위 코드에서는 savePost 함수를 통해 게시물을 저장하고, getPosts 함수를 통해 게시물 목록을 불러옵니다. 또한, updatePost 함수와 deletePost 함수를 통해 게시물을 수정하거나 삭제할 수 있습니다.

마무리

이번 기술 블로그에서는 자바스크립트 Local Storage를 이용하여 간단한 포럼 기능을 구현하는 방법에 대해 알아보았습니다. Local Storage를 활용하면 웹페이지에서 사용자 데이터를 영구적으로 저장하고 관리할 수 있으므로 다양한 웹 애플리케이션에서 유용하게 활용할 수 있습니다.

#javascript #LocalStorage #포럼기능