localStorage사용해서 북마크 기능 만들기

TMDB API를 가져와서 영화 사이트를 구현하던중 로컬스토리지로 북마크 기능 구현하는데에 큰 어려움이 있었다..

 

로컬스토리지란?

만료 기간이 존재하지 않고 페이지를 변경하거나 브라우저를 닫아도 반 영구적으로 유지되는 저장소를 의미한다.

 

개발자도구 > 애플리케이션 > 로컬 스토리지에 들어가면 키와 값으로 구분되어 저장되는것을 확인할 수 있다.

 

주요메서드

메서드명	설명
localStorage.getItem('키값')	key값이 '키값'인 애들의 value값을 가져와라
localStorage.removeItem('키값')	키값 기반으로 해당 스토리지 삭제
localStorage.clear()	저장된거 모두 삭제
localStorage.setItem('키값' , value)	로컬스토리지에 키값을 가지고 value값을 저장해라

 

순서 생각하기

북마크 저장하기 버튼을 눌렀을때 로직을 짤거다.

1. 로컬 스토리지에 저장된 데이터들을 불러온다.

2. 불러온 데이터가 있다면(즉, 미리 저장된게 있다면) 그 값이 그대로 설정되도록 / 없다면 빈 배열로 설정한다.

3. 내가 선택한 영화를 배열에 추가한다.

4. 로컬스토리지에 추가한다.

 

1. 로컬 스토리지에 저장된 데이터들을 불러온다.

 const localStorageBookMarkList = localStorage.getItem("bookMarkList")

 

주의해야할점

 

객체를 저장할 것이기 때문에, 객체 형태 그대로가 저장되도록 했는데 localStorage에는 진짜 [object]로 저장이 된다.

왜냐면 로컬 스토리지는 객체 형태를 저장할수 없고, 문자 형태로만 저장이 가능하기 때문에, 저장할 객체형태를 우선 문자형태로 바꾸어서 스토리지에 저장해주어야 한다.

 

• JSON.stringfy() : JavaScript 값이나 객체를 JSON 문자열로 변환
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

JSON.stringify() - JavaScript | MDN

 

하지만 문제점

북마크저장하기 누를때마다 누적이 되어서 저장되어야 하는데 항상 마지막꺼로 대체된다..!

이를 해결하기위해 저장된 값을 배열에 추가하여서 누적되게 해야한다!

 

2. 불러온 데이터가 있다면(즉, 미리 저장된게 있다면) 그 값이 그대로 설정되도록 / 없다면 빈 배열로 설정한다.

3. 내가 선택한 영화를 배열에 추가한다.

 

우선 배열을 담을 변수를 선언 하고 2번,3번을 조건문에서 진행하도록 해보자.

let bookMarkList;

• 왜 let을 썼냐고 묻는다면 ... 재할당이 가능하기 때문이다. const는 상수니까 재선언, 재할당 다 안된다. 배열에 저장된 값을 계속 추가해서 쓸거기 때문에 (값 변경이 가능해야함) 변수인 let을 쓴다!

if (!localStorageBookMarkList) {
  bookMarkList = []; 
} else {
  bookMarkList = JSON.parse(localStorageBookMarkList);
}

• 만약 저장된 값들이없다면
• bookMarkList = [] : bookMarkList 에 빈 배열값을 할당하고,
• 저장된게 있다면 저장된 것들을(아까 저장할때 문자열로 바꾸어서 저장했으니 다시 객체형태로 바꿔서) bookMarkList 에 담아준다.
• JSON.parse() : 문자열을 객체형태로 변환
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse 

JSON.parse() - JavaScript | MDN

 

그런후에야 bookMarkList에 선택한 값들을 넣어주고(push), 

그다음 마지막으로 진짜 로컬스토리지에 저장된 배열들을 문자열으로 변경해서 저장해준다!

    bookMarkList.push(movie);
    localStorage.setItem("bookMarkList", JSON.stringify(bookMarkList));

 

 

원하는대로 객체가 배열형태로 들어왔다!

 

 

총 정리하자면?

    const localStorageBookMarkList = localStorage.getItem("bookMarkList"); //bookMarkList 키값으로 저장된 value 값들을 가져와라
 
    let bookMarkList; // 일단 선언해두기
    // bookMarkList.push(movie); // movie를 bookMarkList에 추가
    if (!localStorageBookMarkList) {
      //저장해둔게 아무거도 없으면
      bookMarkList = []; //빈값으로
    } else {
      // 저장해둔게 있으면 아까 문자열로 바꾼것들을 객체로 변환하여 bookMarkList 에 할당한다.
      bookMarkList = JSON.parse(localStorageBookMarkList);

    }
    bookMarkList.push(movie);
    localStorage.setItem("bookMarkList", JSON.stringify(bookMarkList));

 

 

휴우 성공하느라 진땀이^^;