[React] 18. localStorage

localStorage

사이트마다 존재하는 저장공간. 5MB 정도의 '문자' 데이터 저장 가능

localStorage.setItem('데이터이름', '데이터'); //추가
localStorage.getItem('데이터이름'); // 읽기
localStorage.removeItem('데이터이름'); // 삭제

 

localStorage에 array/object 자료 저장, 읽기

localStorage.setItem('obj', JSON.stringify({name:'kim'}) );
var a = localStorage.getItem('obj');
var b = JSON.parse(a)

 

최근 본 상품 기록 저장하기

최근 본 상품의 id를 localStorage의 watched배열에 저장하고, 다른 상품을 봤다면 그 상품의 id를 watched에 추가

useEffect(()=>{
  let watchedArr = localStorage.getItem('watched')
  watchedArr = JSON.parse(watchedArr)
  watchedArr.push(최근본상품.id)

  //Set으로 바꿨다가 다시 array로 만들기 -> 중복 제거
  watchedArr = new Set(watchedArr)
  watchedArr = Array.from(watchedArr)
  localStorage.setItem('watched', JSON.stringify(watchedArr))
}, [])