[TIL 2023.06.05] Javascript localStorage를 이용하여 댓글 기능 만들기

💻오늘 배운 내용

localStorage란?

브라우저에 key-value 값을 Storage에 저장할 수 있다.

세션이 바뀌어도 저장한 데이터가 유지된다.

• setItem() - key, value 추가
• getItem() - value 읽어 오기
• removeItem() - item 삭제
• clear() - 도메인 내의 localStorage 값 삭제
• length - 전체 item 개수
• key() - index로 key값 찾기

localStorage는 문자열만 저장할 수 있다.

 

[객체->문자열]

객체를 저장하려면 JSON.stringify() 메서드로 문자열로 변환한 다음 저장해야 한다.

 

[문자열->객체]

반대로 저장된 문자열 값을 가져와서 다시 객체로 변환하려면 JSON.parse() 메서드를 사용한다.

❓발생한 이슈/고민

로컬 스토리지를 이용하여 댓글 기능 만들기

 

저번주에 만들었던 개인과제를 좀 더 업그레이드하는 것을 팀과제로 받았다.

필수로 추가해야 하는 기능은 영화별 상세 페이지와 상세 페이지 내 리뷰작성 기능이다.

또한 UX를 고려한 validation check도 필요하며, 팀과제이니 만큼 각 팀마다 원하는 기능을 정해서 더 추가하면 된다.

나는 팀장과 상세 페이지 내에 영화 리뷰 작성 기능 구현 역할을 맡았다.

리뷰 작성은 댓글 형식으로 local storage를 이용하여 만들려고 한다.

💡해결과정

  <form id="commentForm">
      <label for="username">유저 이름:</label>
      <input type="text" id="username" required /><br /><br />

      <label for="comment">코멘트:</label>
      <textarea id="comment" required></textarea><br /><br />

      <button type="submit">제출</button>
    </form>

    <div id="commentList"></div>

먼저 입력칸은 작성자와 작성란, 제출 버튼으로 구성 하고 댓글이 나열될 공간인 commentDiv 공간을 만들어 두었다.

 

이제 input과 textarea에 입력된 value를 local storage에 저장한 다음

저장된 데이터를 commentDiv 태크 안에 좌락 붙여주면 될 것이다.

 

const commentForm = document.getElementById('commentForm');
const commentDiv = document.getElementById('commentDiv');

html 요소들을 가져와서 변수를 지정해줬다.

 

// 페이지가 로드될 때 기존 댓글 불러오기
window.onload = function () {
  loadComments();
};

window.onload 이벤트

페이지가 로드될 때 loadComments 함수가 실행된다.

loadComments 함수는 로컬 스토리지에서 저장된 댓글을 불러와서 화면에 표시하는 역할을 한다.

 

// 댓글 작성 폼 제출 시 실행될 함수
document.getElementById('commentForm').onsubmit = function (e) {
e.preventDefault();

// 입력된 이름과 댓글 내용 가져오기
let name = document.getElementById('name').value;
let comment = document.getElementById('comment').value;

// 댓글 객체 생성
let newComment = {
  user: name,
  review: comment,
};

// 기존 댓글 배열 가져오기
let comments = getComments();

// 새로운 댓글 추가
comments.push(newComment);

// 변경된 댓글 배열 저장
localStorage.setItem('comments', JSON.stringify(comments));

// 댓글 목록 다시 불러오기
loadComments();

// 폼 초기화
document.getElementById('commentForm').reset();
};

댓글 작성 폼 제출

document.getElementById("commentForm").onsubmit 이벤트 핸들러가 설정되어 있다.

폼이 제출될 때 실행되는 함수는 다음과 같다:

e.preventDefault()를 호출하여 폼 제출의 기본 동작을 막는다.

이름과 댓글 내용을 document.getElementById를 사용하여 가져온다.

새로운 댓글 객체를 생성하고 입력된 이름과 댓글 내용을 할당한다.

getComments 함수를 호출하여 기존 댓글 배열을 가져온다.

새로운 댓글을 기존 댓글 배열에 추가한다.

localStorage.setItem을 사용하여 변경된 댓글 배열을 로컬 스토리지에 저장한다.

loadComments 함수를 호출하여 변경된 댓글 목록을 다시 불러와서 화면에 표시한다.

마지막으로, 폼을 초기화하여 입력된 값을 지운다.

 

// 로컬 스토리지에서 댓글 배열 가져오기
function getComments() {
  let comments = localStorage.getItem('comments');

  if (comments) {
    return JSON.parse(comments);
  } else {
    return [];
  }
}

getComments 함수

로컬 스토리지에서 "comments" 키로 저장된 값을 가져온다.

가져온 값이 있다면 JSON 형식으로 파싱하여 댓글 배열로 반환한다.

값이 없다면 빈 배열을 반환한다.

 

// 댓글 목록 불러오기
function loadComments() {
  let commentList = document.getElementById('commentList');
  commentList.innerHTML = '';

  let comments = getComments();

  for (let i = 0; i < comments.length; i++) {
    let comment = comments[i];

    let listItem = document.createElement('li');
    listItem.innerHTML =
      '<strong>' + comment.user + ':</strong> ' + comment.review;

    commentList.appendChild(listItem);
  }
}

loadComments 함수

댓글 목록을 표시할 <ul> 요소를 가져온다.

가져온 요소의 내용을 초기화한다.

getComments 함수를 호출하여 로컬 스토리지에서 댓글 배열을 가져온다.

댓글 배열을 순회하면서 각 댓글을 <li> 요소로 생성하여 댓글 목록에 추가한다.

각 댓글은 이름과 댓글 내용을 함께 표시한다.

 

이렇게 작성된 코드는 댓글을 작성하고 로컬 스토리지에 저장한 다음, 페이지를 새로고침해도 댓글이 유지된다.

🧐궁금점과 부족한 내용

다음번엔 수정과 삭제 기능도 추가해서 CRUD를 완성해 보자!

📋레퍼런스

https://velog.io/@jessiii/코딩애플-JS-기초-localStorage에-배열-데이터-저장-수정-추가-삭제

https://velog.io/@hanei100/Udemy-자바스크립트로-댓글-작성-기능-구현하기1

https://hianna.tistory.com/697