localStorage 사용하기

localStorage란?

로컬 스토리지는 서버나 DB 없이 유저의 브라우저에서 저장하고 사용할 수 있는 공간이다.

확인하는 방법?

크롬에서 F12눌러서 개발자 도구 들어간 다음에
Application 탭 들어가면 확인 할 수 있다.

• 사이트마다 5MB 정도의 문자 데이터 저장 가능
• object 자료랑 비슷하게 key/value형태로 저장
• 사이트 재접속 해도 남아있음
• 브라우저 청소시 삭제

localStoage 문법

1. 추가 문법

localStorage.setItem('데이터이름','데이터');

2. 읽기 문법

localStorage.ㅎetItem('데이터이름');

3. 삭제 문법

localStorage.removeItem('데이터이름');

localStorage에 array/object 자료를 저장하려면?

저번 블로그에 간단하게 썼던 이야기 같지만
JSON을 활용하는 방법이다.
JSON은 문자취급을 받기에 array/object 자료에 따옴표를 쳐서 문자로 취급하는 방식으로 작동한다.

localStorage.setItem('obj', JSON.stringify({name:'kim'}));

저렇게 하고

var a = localStorage.getItem('obj');
var b = JSON.parse(a)

하면 잘 꺼내질 것이다.
JSON -> array/object 변환하고 싶으면
JSON.parse() 를 쓰면 된다.

최근 클릭 목록 저장하기

useEffect(()=>{
	let 꺼낸거 = localStorage.getItem('watched')
    꺼낸거 = JSON.parse(꺼낸거)
    꺼낸거 = push(찾은상품.id)
  	localStorage.setItem('watched',JSON.stringify(꺼낸거))
},[])

이렇게 하면 로컬스토리지에 잘 저장이 될 것 같다.
그런데 똑같은걸 계속 보면 똑같은게 계속 저장이 되는데
중복을 없애는 것도 한번 해보자

중복 제거하기

if를 써도 되겠지만 Set자료형을 써도 된다.
Set은 array와 똑같지만 중복을 없애주는 array이다.

useEffect(()=>{
  let 꺼낸거 = localStorage.getItem('watched')
  꺼낸거 = JSON.parse(꺼낸거)
  꺼낸거.push(찾은상품.id)

  //Set으로 바꿨다가 다시 array로 만들기
  꺼낸거 = new Set(꺼낸거)
  꺼낸거 = Array.from(꺼낸거)
  localStorage.setItem('watched', JSON.stringify(꺼낸거))
}, [])

이렇게 Set자료형은
array <-> Set 변환이 쉬워서
array -> Set -> array 이런 식으로
array에서 중복제거를 쉽게 할 수 있다.