09. localStorage

Local Storage

크롬개발자 도구 -> Application -> Local Storage

1) 특징

• 5MB 정도의 문자 데이터 저장 가능
• 캐시를 삭제하지 않는 이상 영구적으로 저장
• object 자료랑 유사하게 key/value 형태로 저장 

 

2) 문법

(1) 추가

localStorage.setItem('dataName','data')

(2) 읽기

localStorage.getItem('dataName')

(3) 삭제

localStorage.removeItem('dataName')

 

3) array/object를 바로 저장 불가능

편법으로 저장 방법

 

(1) array/object -> JSON 변환 

JSON은 문자 취급을 받는다. JSON은 따옴표친 array/object 자료이다.

localStorage.setItem('object',JSON.stringify({name:'key'}));

{name:'key'}를 JSON으로 변경했다. 어떻게 변했을까?
{name:'key'} -> "{"name":"kim"}"

 

(2) JSON -> array/object 변환 

JSON.parse() 사용

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

 

4) 최근 본 상품 UI 기능 만들기 

(1) detail 페이지 접속

(2) 현재 페이지 상품 id 가져오기

(3) localStorage에 watch항목에 있던 []에 추가해주기

 

 

① detail.js

useEffect(()=>{
//1. watched의 data 꺼내기
let outData=localStorage.getItem('watched')
//2. 꺼낸 데이터 object/array로 변환
outData=JSON.parse(outData)
//3. 해당 페이지 id outData에 넣기
outData.push(찾은상품.id)
//4. 꺼낸거 JSON으로 변환해서 다시 넣기
localStorage.setItem('watched',JSON.stringify(outData))
},[])

② 중복을 제거 하고 싶다면?

useEffect(()=>{
//1. watched의 data 꺼내기
let outData=localStorage.getItem('watched');
//2. 꺼낸 데이터 object/array로 변환
outData=JSON.parse(outData);
//3. 해당 페이지 id outData에 넣기
outData.push(찾은상품.id);

//--> set으로 바꿨다가 다시 array로 만들기
outData = new Set(outData);
outData = Array.from(outData);
//4. 꺼낸거 JSON으로 변환해서 다시 넣기
localStorage.setItem('watched',JSON.stringify(outData))
},[])

③ 여기서 사이트가 새로고침시 localStorage에 있던 항목도 싹 [] 로 비워지는데 막는 방법은?

product.js : 클릭할 상품 컨포넌트

  useEffect(() => {
    if (!localStorage.getItem("watched")) {
      localStorage.setItem("watched", JSON.stringify([]));
    }
    // 새로고침시 초기값으로 돌아갈땐
    // 이미 watch 항목 있으면 setItem 하지말아주세요
  });