[JavaScript] localStorage 사용하기 (찜하기 기능 개선)

이전 포스팅에서 찜하기 기능을 구현했는데, 브라우저를 껏다 켜면 내가 찜한 목록이 사라지는 문제가 있었다.

App.jsx가 렌더링 될 때마다 찜한 목록의 id를 담고있는 state가 빈 배열로 초기화되기 때문에 그렇다.

이번 포스팅에선 그 문제를 해결하기 위해 localStorage를 사용해보려 한다.

 

https://duski96.tistory.com/8

[React] 찜하기 기능 구현하기 (관심 매물 등록)

 

https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage

Window.localStorage - Web API | MDN

 

localStorage와 sessionStorage의 차이

localStorage는 사용자가 직접 데이터를 삭제하거나 다른 브라우저를 사용하지 않는 한 데이터가 만료되지 않는다.

즉 새로고침을 아무리 많이 하고 PC를 껏다가 켜더라도 저장된 데이터가 남아있다는 것이다.

하지만 sessionStorage의 경우 브라우저 탭을 닫으면 세션이 끝나면서 데이터가 초기화된다.

찜하기 기능의 경우 굳이 창을 닫는다고해서 초기화될 이유가 없기 때문에 localStorage에 id를 저장하기로 했다.

 

localStorage에 데이터 저장하기

localStorage.setItem()을 활용해 현재 도메인의 저장소에 접근해 데이터를 저장할 수 있다.

setItem() 사이에 key, value 순서로 작성해주면 된다.

localStorage.setItem('interestId',JSON.stringify(interestId));
// key : 'interestId', value : interestId 배열

 

JSON.stringify() 매서드 사용

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

JSON.stringify() - JavaScript | MDN

 

저장해야 할 interestId는 배열인데, 배열을 직접 localStorage에 저장할 수 없기 때문에 JSON.stringify() 매서드를 사용해 문자열 형태로 저장해주어야 한다.

 

localSotrage에서 데이터 불러오기

localStorage.getItem()과 key 값을 사용해 저장된 데이터를 불러올 수 있다.

let storedInterestId=JSON.parse(localStorage.getItem('interestId'));

 

JSON.parse() 매서드 사용

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

JSON.parse() - JavaScript | MDN

 

데이터를 저장할 때 JSON.stringify 매서드를 사용해 문자열 형태로 저장했다.

불러온 데이터를 사용하려면 다시 배열이나 객체같은 원본의 형태가 되어야 하므로 JSON.parse() 매서드로 파싱 과정을 거쳐주어야 한다.

const storedInterestId=JSON.parse(localStorage.getItem('interestId'));
// 찜한 목록의 id를 localStorage에서 불러옴

const [interestId, setInterestId]=useState(storedInterestId ? storedInterestId : []);
// localStorage가 비어있을 경우 빈 배열을 초기값으로, 그렇지 않으면 저장된 데이터를 초기값으로 지정

const getInterestId=(targetId)=>{
	/*생략*/
}

const deleteInterestId=(targetId)=>{
  /*생략*/
}

localStorage.setItem('interestId',JSON.stringify(interestId));
// interestId의 상태가 변하면 localStorage에 저장

 

이전에 포스팅한 찜하기 기능을 구현한 코드 중 App.jsx에 해당하는 부분을 약간 수정해주면 된다.

localStorage에 접근해 데이터를 저장하고 불러오는 코드를 추가하고 interestId의 초기값만 수정해주었다.