자바스크립트 Local Storage를 이용한 방명록 기능 구현

15 Sep 2023

javascript

개요

방명록은 웹 사이트나 애플리케이션에서 사용자들이 방문한 흔적을 남기는 기능입니다. 이 기능을 구현하기 위해 자바스크립트의 Local Storage를 활용하면 사용자의 정보를 브라우저에 저장하여 새로고침이나 페이지 이동을 해도 데이터를 유지할 수 있습니다. 이번 블로그 포스트에서는 자바스크립트의 Local Storage를 사용하여 방명록 기능을 구현하는 방법을 알아보겠습니다.

코드 구현

// 방명록 정보를 Local Storage에 저장하는 함수
function saveGuestbook(name, message) {
  // 기존에 저장된 방명록 데이터 가져오기
  let guestbook = JSON.parse(localStorage.getItem('guestbook')) || [];

  // 새로운 방명록 객체 생성
  const newEntry = { name, message };

  // 새로운 방명록 데이터를 배열에 추가
  guestbook.push(newEntry);

  // 업데이트된 방명록 데이터를 Local Storage에 저장
  localStorage.setItem('guestbook', JSON.stringify(guestbook));

  // 방명록 데이터 저장 후 화면 갱신
  displayGuestbook();
}

// 방명록을 화면에 출력하는 함수
function displayGuestbook() {
  const guestbook = JSON.parse(localStorage.getItem('guestbook')) || [];

  // 출력할 HTML 초기화
  let html = '';

  // 각 방명록을 순회하며 HTML 생성
  guestbook.forEach(entry => {
    html += `<div><strong>${entry.name}:</strong> ${entry.message}</div>`;
  });

  // HTML을 적용할 요소 선택 후 내용 갱신
  document.getElementById('guestbook').innerHTML = html;
}

// 페이지 로드 시 실행할 초기화 함수
function init() {
  // 방명록 데이터를 화면에 출력
  displayGuestbook();

  // 폼 제출 이벤트 리스너 등록
  document.getElementById('guestbookForm').addEventListener('submit', e => {
    e.preventDefault();

    // 폼 입력값 가져오기
    const name = document.getElementById('name').value;
    const message = document.getElementById('message').value;

    // 방명록 저장 함수 호출
    saveGuestbook(name, message);

    // 폼 입력값 초기화
    document.getElementById('name').value = '';
    document.getElementById('message').value = '';
  });
}

// 페이지 로드 시 초기화 함수 실행
init();

설명

위의 코드는 방명록을 저장하고 출력하는 자바스크립트 함수들을 포함하고 있습니다.

saveGuestbook 함수는 사용자가 작성한 이름과 메시지를 인자로 받아 Local Storage에 방명록 데이터를 저장합니다.
displayGuestbook 함수는 Local Storage에서 방명록 데이터를 가져와 화면에 출력합니다.
init 함수는 페이지 로드 시 초기화를 담당하며 방명록 데이터를 출력하고 폼 제출 이벤트 리스너를 등록합니다.

위의 함수들을 적절한 위치에 추가하고, HTML 파일에서 방명록을 출력할 요소를 지정하는 id값과 상호작용하는 폼 요소를 작성하여 기능을 구현할 수 있습니다.

결론

이번 포스트에서는 자바스크립트의 Local Storage를 이용하여 방명록 기능을 구현하는 방법을 알아보았습니다. Local Storage를 사용하면 페이지 이동이나 새로고침을 해도 데이터를 유지할 수 있어 사용자 친화적인 기능을 구현할 수 있습니다. 자바스크립트와 Local Storage를 잘 활용하여 웹 애플리케이션의 기능을 개선시키는데 응용할 수 있습니다.

#자바스크립트 #Local Storage