[React] localStorage 간단 정리, localStorage에 내가 본 상품 데이터 저장하기

안녕하세요?

오늘은 localStorage에 대해서 간단하게 정리해본 뒤, 내가 본 상품의 데이터를 받아서 localStorage에 띄우는 기능을 만들어 볼 겁니다!

---

1. localStorage 간단 정리

먼저 localStorage는 state와 다르게 페이지를 새로고침해도 데이터가 리셋되지 않는 거 아시죠?

물론 데이터를 서버로 보내서 DB에 저장하면 되지만, 서버나 DB의 지식이 없다면 localStorage를 이용하면 됩니다.

 

- localStorage 공간 확인하기

localStorage는

개발자 도구(F12) > Application 탭 > 왼쪽 Local Stoage > 페이지 주소 클릭

을 하면 확인할 수 있습니다.

 

- localStorage에 데이터값 저장, 불러오기, 삭제하기

1. 데이터 저장하기

localStorage.setItem('이름', '값')

ex) localStorage.setItem('age', '25')

 

2. 데이터 불러오기

localStorage.getItem('이름')

ex) localStorage.getItem('age')

> 25

 

3. 데이터 삭제하기

localStorage.removeItem('이름')

ex) localStorage.removeItem('age')

 

2. localStorage에 내가 본 상품 데이터 저장해보기

이런 식으로 내가 본 상품의 아이디가 watched 저장소에 들어가도록 만들 예정이다.

- 작업 파일

App.js(메인페이지), Detailpage.js(상품페이지)

 

- 코드 순서

localStorage에 빈 배열 생성해주기 > 상품페이지에서 만들어진 localStorage에 데이터 값 넣어주기

 

1. App.js에 localStorage 빈 배열을 생성해준다.

localStorage를 사용하려면 먼저 localStorage를 생성해줘야 된다. 사용자가 제일 먼저 접속하는 곳이 메인페이지이기 때문에, 메인페이지인 App.js에 useEffect를 이용해서 localStorage를 생성한다.

// App.js
useEffect(()->{
	if(!window.localStorage.getItem('watched')){
    	window.localStorage.setItem('watched',JSON.stringify([]));
    }
}, []);

조건문으로 생성해주지 않으면 메인페이지를 방문할 때마다 watched가 빈 배열로 초기화 되기 때문에, watched라는 로컬스토리지가 생성되어 있지 않다면 새로운 배열을 만들도록 한다.

 

* JSON.stringify()는 배열/오브젝트형 자료형을 문자열로 바꿔주는 함수인데, localStorage에는 문자열만 저장할 수 있기 때문에, 배열을 로컬스토리지에 저장하기 위해서는 JSON.stringify를 이용해 문자열로 바꿔줘야 한다.

 

2. DetailPage.js에서 접속한 상품페이지의 상품 데이터 값을 받는다.

나는 일단 쉽게 상품의 아이디값을 받아와 보겠다.

// Detailpage.js
useEffect(()=>{
    let watchedItem = window.localStorage.getItem('watched');
    watchedItem = JSON.parse(watchedItem);
    watchedItem.push(shoes.id); //임의로 설정한 상품의 id값
    window.localStorage.setItem('watched', JSON.stringify(watchedItem));
}, [])

useEffect를 이용해서, 사용자가 특정 상품 페이지에 접속하면 상품의 id 값을 받아서 만들어둔 localStroage에 저장한다.

원리는, watchedItem이라는 변수에 watched의 빈배열을 가져와 넣는다.

 

가져온 배열은 위에서 JSON.stringify로 문자열로 바꿔줬기 때문에, 다시 배열로 바꿔주는 작업이 필요해서 문자열을 array 형태로 다시 바꿔주는 JSON.parse() 함수를 쓴다.

 

그렇담 watchedItem이 다시 배열로 바뀌기 때문에, 배열에 원소를 추가하는 push()를 이용해 배열에 내가 본 상품의 id값을 넣어준다.

 

마지막으로 setItem을 이용해 넣어준 id값이 들어간 배열로 새로 set해준다.

 

+) 추가사항: 본 상품이 중복될 때 중복을 제거하는 법.

// Detailpage.js
useEffect(()=>{
    let watchedItem = window.localStorage.getItem('watched');
    watchedItem = JSON.parse(watchedItem);
    watchedItem.push(shoes.id); //임의로 설정한 상품의 id값
    let newItem = [...new Set(wathchedItem)];
    window.localStorage.setItem('watched', JSON.stringify(newItem));
}, [])

new Set()을 이용해서, 넣은 id값 기존에 있는 배열을 비교해 중복되는 값이 있으면 제거해서 데이터를 넣는다.

---