[JavaScript] 개인 과제 수행 - 3일차 (localStorage)

북마크 추가 버튼을 눌렀을 때 해당 카드만 따로 저장되는 로직을 구현하기 위해선 localStorage라는게 필요하다.

 

브라우저에서만 저장되면 되는 정보이기때문에 데이터베이스를 이용할 필요까진 없을때 주로 로컬스토리지를 사용한다고 하더이다..

 

그럼 먼저 localStorage가 무엇인지 알아보겠다.

 

localStorage란?

브라우저에 key-value값을 Storage에 저장하는것을 말한다. 여기서 저장된 데이터는 세션간 공유가 되기 때문에 세션이 바뀌어도 저장한 데이터가 그대로 남아있다. (같은 도메인 내에서 페이지가 바뀌더라도 저장된 정보가 남아있다는 뜻인듯?)

 

localStorage 사용 방법

setItem() : key-value값 추가

window.localStorage.setItem(key, value)

window.localStorage.setItem('name', 'kim')
window.localStorage.setItem('age','30')

주의점! 로컬스토리지에는 문자열만 저장할 수 있다. 
그렇기때문에 나이에 숫자가 들어가도 '30'이라는 문자열 형태로 들어가게 된다.

 

getItem() : value 읽어오기

window.localStorage.getItem(key)

const name = window.localStorage.getItem('name')
const age = window.localStorage.getItem('age')

console.log(name, age) // kim 30

 

객체 또는 배열일 때 로컬스토리지에 저장하기

객체나 배열의 형태도 그대로는 저장되지 않는데 그럴때 배열, 객체 형태의 테이터를 저장하기 위해
JSON.stringify()의 형태로 저장해야한다.

const obj = {
  name: 'kim',
  age: 30
 }
 
const arr = [1,2,3];

이런 두가지 객체와 배열이 있다고 했을 때 스토리지에 넣기 위해선JSON이 필요하다.

//객체와 배열을 JSON 문자열로 변환
const objStr = JSON.stringify(obj)
const objArr = JSON.stringify(arr)

//setItem
window.localStorage.setItem('human', objStr)
window.localStorage.setItem('nums', objArr)

//getItem
window.localStorage.getItem('human')
window.localStorage.getItem('nums')

//JSON.parse()를 이용해 JSON 문자열을 다시 객체, 배열 형태로 변환
const humanObj = JSON.parse(objStr)
const numsArr = JSON.parse(objArr)

console.log(objStr) // {"name":"kim","age":30}
console.log(objArr) // [1,2,3]
console.log(humanObj) // object 형식의 {name: 'kim', age: 30}
console.log(numsArr) // 배열 형식의 [1,2,3]

 

removeItem() : 아이템 삭제

window.localStorage.removeItem(key)

 

clear() : 도메인 내의 localStorage 값 삭제

window.localStorage.clear()

 

length : 전체 아이템 갯수

window.localStorage.length

 

key() : index로 key값 찾기

window.localStorage.key(index)

 

대략적으로 로컬스토리지를 사용하는 방법은 이렇다. 

 

 

---

 

 

 

이제 내 vscode를 뜯어보자

  // 북마크 추가 버튼을 눌렀을 때
  addBookmark.addEventListener("click", () => {
    addBookmark.style.display = "none"; // 추가 버튼 숨기기
    removeBookmark.style.display = "flex"; // 삭제 버튼 보이기
    alert("영화가 북마크에 추가되었습니다!");

    // 영화 정보를 로컬 스토리지에 저장
    let bookmarksData = JSON.parse(localStorage.getItem("bookmarks")) || [];
    // => bookmarks라는 문자열로 변환되어 저장된 영화 데이터 or 빈 문자열
    
    if (
      bookmarksData.filter((bookmark) => bookmark.id === modalMovieData.id)
        .length === 0
        // => bookmarksData에서 bookmark.id와 modalMovieData.id 값이 같으면 걸러준다.
    ) {
      bookmarksData.push(modalMovieData); // 현재 모달의 영화 정보를 추가
      console.log(modalMovieData);
      localStorage.setItem("bookmarks", JSON.stringify(bookmarksData));
    } // 저장
  });

 

영화정보 api를 보면 각각의 영화마다 고유한 id값이 있다. 이 id값을 이용해 카드가 중복으로 쌓이지 않도록 해준다. 

 

북마크 추가버튼이 모달 창 안에 있는 버튼이기 때문에 모달창을 구현하는 함수 안에서 작동되어야 한다. 

모달창을 구현할 때 영화 정보를 modalMovieData라는 파라미터 값으로 받아왔다. 그래서  modalMovieData.id가 bookmark.id와 같으면 걸러주는 조건을 달아 if문을 구현함. 

 

---

 

 

이제 모달창을 벗어나 로컬스토리지에 저장된 영화 정보를 북마크 보기 버튼을 눌렀을 때 북마크 저장한 영화들이 보이도록 해보자

 

// 북마크보기 버튼 이벤트리스너
const bookmarkBtn = document.querySelector("#bookmarkBtn");

bookmarkBtn.addEventListener("click", () => {
  // 로컬 스토리지에서 북마크된 영화 불러오기
  const showBookmarks = JSON.parse(localStorage.getItem("bookmarks")) || [];
 
  const movieContainer = document.getElementById("movies-container");
  movieContainer.innerHTML = ""; // 기존 영화 카드 초기화

  if (showBookmarks.length > 0) {
    showBookmarks.forEach((movie) => {
      // 카드 생성
      const bookmarkCard = document.createElement("div");
      bookmarkCard.classList.add("movie-card");

      bookmarkCard.innerHTML = `
      <img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" alt="${movie.title}" />
      <h3>${movie.title}</h3>
      <p>개봉일 : ${movie.release_date}</p>
      <p>평점 : ${movie.vote_average}/10</p>
    `;

      // 클릭 이벤트 추가 (필요시)
      bookmarkCard.addEventListener("click", () => {
        createModal(movie); // 클릭된 영화 정보를 모달에 표시
      });

      // 북마크된 영화 카드를 컨테이너에 추가
      movieContainer.appendChild(bookmarkCard);
    });
  } else {
    movieContainer.innerHTML = `<p class="noBookmark">북마크된 영화가 없습니다</p>`;
  }
});

 

 

 

우선 이렇게 북마크 버튼을 눌렀을 때 로컬스토리지에 데이터가 저장되는것, 북마크보기 버튼을 눌렀을 때 북마크 된 영화들이 보이는것까진 구현했다!!!! 

아 그리고 로고 누르면 첫페이지로 돌아오는것도 구현함!!! 음하핳!!!

 

이제 삭제... 내일의 나 화이팅...!