localStorage로 데이터 저장하기

LocalStorage

• 새로고침하면 모든 state 데이터는 리셋된다.
  새로고침하면 브라우저는 html, css, js 파일들을 처음부터 다시 읽기 때문에
• 개발자 도구에서 Application 탭 들어가면 LocalStorage를 볼 수 있다.
• 사이트마다 5MB 정도의 문자 데이터를 저장 가능
• object 자료랑 비슷하게 key / value 형태로 저장
• 유저가 브라우저 청소를 하지 않는 이상 영구적으로 남아있다.
• Session Storage도 있는데 이건 브라우저 끄면 삭제된다.

LocalStorage 문법

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

• 차례로 추가, 읽기, 삭제 문법

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

• 문자만 저장할 수 있는 공간이라 array / object를 바로 저장할 수는 없다.
• 강제로 저장해보면 문자로 바꿔서 저장해주는데 그럼 array / object 자료가 깨져서 저장된다.
• 따라서 array / object를 JSON 형태로 변환해서 저장해주어야 한다.
• JSON은 따옴표친 array / object 자료

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

• JSON.stringify() 라는 함수에 array / object를 집어넣으면 그 자리에 JSON으로 변환된 걸 남겨준다.
• 위처럼 하면 "{"name" : "kim"}" 이렇게 저장

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

• 데이터를 다시 꺼내면 당연히 JSON 형태로 나온다.
• JSON에서 array / object로 변환하고 싶으면
  JSON.parse()를 쓰면 된다.

응용 : 최근 본 상품들을 LocalStorage에 저장하여 나타내기

1. Detail 페이지 접속하면
2. 현재 페이지에 보이는 상품 id 가져와서
3. localStorage에 watch 항목에 있던 [ ]에 추가

(Detail.js)

useEffect(()=>{
  console.log(찾은상품.id)
}, [])

• 1번은 Detail.js 아무데나 useEffect() 하나 집어넣으면 1번 번역 끝
• 2번은 미리 작성해둔 찾은 상품 변수의 id를 가져오면 된다.
• 3번 localStorage에 watch 항목에 추가는 localStorage에 있던 기존 데이터를 수정하고 이런 건 불가능하다.
  입력 / 출력 밖에 안됨.
  • 따라서 watch에 있던  [ ] 빼서 찾은 상품.id를 추가하고 다시 watch 항목으로 저장하는 식으로 해야된다.

(Detail.js)

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

• 따라서 watched에 있던  [ ] 꺼내서 찾은 상품.id 추가하고 다시 watched 이름으로 집어넣어야된다.
• 이렇게 해서 같은 페이지 상품 페이지 계속 접속하면 똑같은 상품id가 계속 추가되는 현상이 발생한다.

중복제거

(Detail.js)

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

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

• Set 자료형을 쓴다면 중복을 알아서 제거해주는 array이기 때문에 더 간편하다.
• array -> Set -> array 이런 식으로 쓰면 array에서 중복제거를 쉽게 할 수 있다.
• 더 쉽게 하려면 new Set(array 자료) 하면 array를 Set으로 / Array.from(Set 자료) 하면 Set을 array로 바꿀 수 있다.

LocalStorage에 state를 자동저장되게 만들고 싶다면?

• redux-persist 이런 라이브러리 설치해서 쓰면 redux store 안에 있는 state를 자동으로 localStorage에 저장해준다.
• state 변경될 때마다 그에 맞게 localStorage 업데이트도 알아서 해준다.
  하지만 셋팅 문법이 좀 복잡한 편
• Redux 대신 Jotai, Zustand 같은 라이브러리 사용하는 것도 방법