옛날에 자바스크립트 강의를 들을때 잠깐 찍먹했던 기억이 있는 localStorage..
블로그에도 잠깐 정리한 적이 있다.

리엑트 강의를 보면서 또 나오길래 복습할 겸 다시 정리해보려고 한다ㅎ 굿!!

🤔 local Storage? Session Storage?

local Storage

• 크롬 개발자도구에서 Application탭에 들어가면 확인 가능

• object자료와 비슷하게 key/value형태로 저장

• 유저가 브라우저 청소를 하지 않는 이상 영구적으로 남아있음

  localStorage 문법

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

  localStorage에 array/object자료 저장

  문자만 저장할 수 있는 공간이라 array/object는 바로 저장하지 못함
  그래서 json으로 변환해서 저장해야 함.

  ✔️ array/object → json

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

  JSON.stringify()함수 안에 array/object를 넣으면 됨

  ✔️ json → array/object

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

  JSON.parse()함수 사용

  중복제거

  중복제거를 하려면 Set자료형을 쓰면 됨.
  
  Set은 array와 똑같은데 중복을 알아서 제거해주는 array임
  
  array → Set → array 으로 사용
  

  (Detail.js)
  
  useEffect(()=>{
    let 꺼낸거 = localStorage.getItem('watched')
    꺼낸거 = JSON.parse(꺼낸거)
    꺼낸거.push(찾은상품.id)
  
    //Set으로 바꿨다가 다시 array로 만들기
    꺼낸거 = new Set(꺼낸거)
    꺼낸거 = Array.from(꺼낸거)
    localStorage.setItem('watched', JSON.stringify(꺼낸거))
  }, [])

  • set 변환 : new Set(array자료)
  • array로 변환 : Array.from(Set자료)

  
  

Session Storage

• localStorage와 같지만 sessionStorage는 영구적이진 않고 브라우저를 종료하면 삭제됨

📎 예제 풀어보며 익히기

찾은상품 id localStorage에 누적하면서 localStorage에 대해 익혀보려고 한다.

우선 코드를 짜기 전에 어떤식으로 코드짤지를 먼저 적어보면

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

이런식으로 짜려고 함

(Detail.js)

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

1. Detail.js에 useEffect()하나 넣고
2. 찾은상품이라는 사용자가 본 상품의 id를 들고옴

3번은 locatStorage안에 watched라는 항목을 미리 만들어두고 추가만 하면 되는데
localStorage는 기존데이터를 수정할 수 없음
입출력만 가능

그래서 watched에 있는 []를 빼서
찾은상품.id를 추가
다시 watched에 저장

이렇게 코드짜면 될 듯

✨ 예시 답안

(Detail.js)

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

그럼 최종코드는 이렇게 되겠다.

• watched에 있던 []를 꺼내서
• json→array/object로 번역(JSON.parse())
• 찾은상품.id를 꺼낸거에 다시 넣고
• 그걸 json형식으로 번환해서 'watched'라는 이름으로 다시 넣어달라고 했음.

근데 같은 상품페이지에 계속 접속하면 똑같은 상품 id가 중복누적됨..

💡 중복제거하기

(Detail.js)

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

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

위에서 다룬것 처럼 new Set(array자료)로 array자료를 Set으로 변환,
Array.from(Set자료)로 Set을 Array로 변경해서 중복을 제거해봤다.