[React] localStorage

localStorage

• key : value 형태로 저장가능
• 문자 데이터만 가능(최대 5MB까지 가능)
• 사이트 재접속해도 남아있음

---

 

📘 최근 본 상품 UI

 

- App,js

• 상품id를 저장할 공간 만들어두기

useEffect(() => {
  if (localStorage.getItem('watched') == null) { // 조건 안 걸면 App.js 페이지 실행할 때마다 watched 값이 null이됨
      localStorage.setItem('watched', JSON.stringify( [] ))
    }
}, [])

 

- Detail.js

• 사용자가 Detail페이지 접속시
• 해당 페이지의 상품id를 가져와서
• localStorage에 watched 항목에 추가

  useEffect(() => {
    let getWatched = localStorage.getItem('watched') // 값 꺼내서
    getWatched = JSON.parse(getWatched)
    getWatched.push(shoesId.id) // 수정 후
    localStorage.setItem('watched', JSON.stringify(getWatched)) // 다시 넣기
  }, [])

 

 

✅ 모든 state를 localStorage에 자동저장하는 라이브러리

• redux-persist
• Jotai
• Zustand