[TIL 2023.06.07] localstorage 페이지 당 각각의 댓글창 구현하기

❓발생한 이슈/고민

자바스크립트와 로컬스토리지를 이용한 댓글 CRUD 기능은 다 구현이 되었지만

각각의 영화 페이지 마다 고유의 댓글창이 나와야 하는데 모든 페이지에 똑같은 댓글이 나타나는 문제 발생

💡해결과정

문제를 해결하기 위해서는 현재의 코드에서 4가지 수정사항이 필요했다.

 

1. 각 영화 페이지마다 고유한 식별자를 가지고 있어야 한다. 

각 영화 페이지의 URL을 사용하여 고유한 식별자를 만들어서 댓글을 구분하는데 사용할 것.

 

2. localStorage를 사용하여 댓글을 저장할 때, 식별자를 함께 저장해야 한다.

기존의 comments 배열 대신 객체 형태로 댓글을 저장해야 한다.

객체의 속성으로는 영화Id, username, comment, password를 포함

 

3. displayComments() 함수에서는 로컬스토리지에서 해당 영화 페이지의 댓글만 가져오도록 수정해야 한다.

이를 위해서는 해당 영화 페이지의 식별자를 사용하여 로컬스토리지에서 필터링된 댓글들을 가져와야...

 

4. 새로운 댓글을 저장할 때에도 해당 영화 페이지의 식별자를 함께 저장해야 한다.

 

const movieId = getMovieIdFromURL(); // URL에서 영화 식별자를 가져오는 함수

먼저, 식별자를 가지고 오는 함수를 전역변수로 두었다.

 

// 현재 페이지의 URL에서 영화 식별자를 추출
function getMovieIdFromURL() {
  const url = window.location.href;
  const urlParts = url.split('?');
  // 예를 들어, URL이 "http://example.com/movies.html?id=123"인 경우,
  // "movies.html" 다음 부분이 식별자일 수 있다.
  const movieId = urlParts[urlParts.length - 1];
  return movieId;
}

getMovieIdFromURL() 함수를 사용하여 URL에서 영화 식별자를 추출하는 방법을 사용했다.

현재 페이지의 URL을 window.location.href를 통해 가져온 다음,

URL을 /로 분리하여 배열로 만들고, 배열의 마지막 부분을 영화 식별자로 간주하게 했다.

예를 들어, URL이 "http://example.com/movies.html?id=123"인 경우, "movies.html" 다음 부분이 식별자.

 

localStorage.setItem(`comments_${movieId}`, JSON.stringify(comments));
const commentsJSON = localStorage.getItem(`comments_${movieId}`);

localStorage의 키에는 comments_${movieId}와 같이 영화 식별자를 포함하여 고유한 키와 값을 저장하고 불러오게 수정.

 

// 영화 식별자를 기반으로 해당 영화의 댓글을 가져옴
function getCommentsForMovie(movieId) {
  const commentsJSON = localStorage.getItem(`comments_${movieId}`);
  return commentsJSON ? JSON.parse(commentsJSON) : [];
}

// 영화 식별자를 기반으로 해당 영화의 댓글을 설정
function setCommentsForMovie(movieId, comments) {
  localStorage.setItem(`comments_${movieId}`, JSON.stringify(comments));
}

저장용, 불러오기용 함수를 따로 만들어 두고

각 함수의 변수 선언부를 수정

 

예를들어 기존에는 이렇게

const comments = JSON.parse(localStorage.getItem('comments')) || [];

코멘트라는 키값으로 저장한 데이터를 불러오는 변수를 지정하는 식이었다면

const comments = getCommentsForMovie(movieId);

함수를 호출하는 방식으로 수정되었다.

 

다 만들어 놓고서 수정 하려니 상당히 머리가 빠지는 것 같고 번거로운 작업이었지만

재....미있었....다.....

🧐궁금점과 부족한 내용

이제 기능은 정말 다했으니 페이지에 잘 넣어야 하는데...

댓글창을 세련되게 만들고 싶은데 센스가 부족하다...

css를 더 연습해야 할 듯