localStorage란?
브라우저에서 제공하는 데이터 저장소
개발자 도구로가서 애플리케이션 >> 로컬 스토리지 에 가면 확인이 가능하다.
1. key : value 형태로 저장가능
2. 문자만 저장가능
3. 최대 5MB까지 문자만 저장가능
4. 사이트 재접속 해도 남아있음 (브라우저 청소하면 삭제됨!)
session Storage란?
session Storage 는 조금 다르다
이건 브라우저 끄면 날아가는 저장공간!
localStorgae 문법
추가, 읽기, 삭제 문법은 다음과 같다.
콘솔창에서 직접 해보면 localStorage 에 추가되고 삭제되는 걸 확인할 수 있다.
localStorage.setItem('데이터이름', '데이터');
localStorage.getItem('데이터이름');
localStorage.removeItem('데이터이름')
localStorage 에 array/object 자료 저장하기
문자만 저장하지 말고 array/object 를 json 으로 변환해서 저장할 수 있다.
localStorage.setItem('obj', JSON.stringify({name:'kim'}) );
데이터를 꺼내서 쓸때에는 json 형태일 것이다.
다시 array/object 형태로 변환하고 싶으면 다음과 같은 문법을 써준다.
JSON.parse( ) 에 넣어주면 된다.
var a = localStorage.getItem('obj');
var b = JSON.parse(a)최근 본 상품 기능 만들기
localStorage 를 이용해 상세 페이지로 이동했을 때
그 상품을 localStorage 에 저장해서, 최근 본 상품 리스트에 추가해주도록 했다.
아래는 Detail.js 이다.
let { id } = useParams();
let item = props.shoes.find(
(x) => String(x.id) === String(id) //array자료의 id 와 url에 입력한 번호가 같은 경우(조건식)
);
useEffect(() => {
let x = localStorage.getItem("watched");
x = JSON.parse(x);
x.push(item.id);
x = new Set(x); //set 자료형으로 중복 제거
x = Array.from(x); //다시 array로 변환
localStorage.setItem("watched", JSON.stringify(x));
}, []);item 을 찾을 때 x.id와 id의 타입을 똑같이 변환해주는 과정이 필요했다.
이렇게 하지 않았더니 타입이 달라 undefined 라고 떴다.
상세페이지를 접속할때 가져온 item의 id가 잘 저장되는 것을 볼 수 있다.
중복제거를 하지 않으면 [0,1,1,1,1 ...] 이렇게 저장이 될 수 있기 때문에
set 자료형으로 중간에 변환하는 과정을 추가해서
중복된 상품은 제거하도록 했다.
localStoarge에 state 가 자동저장되게 하는 법
redux-persist 라는 라이브러리 설치해서 사용하기
신규 사이트들은 redux 대신 Jotai, Zustand 같은 라이브러리 사용하기도함.
