Today Topic : LocalStorage로 최근 본 상품 기능 개발하기

🗝 Keywords

✅ LocalStorage 개요

✅ LocalStorage로 최근 본 상품페이지 기획하기

LocalStorage 개요

localStorage.setItem(키,값)
localStorage.getItem(키,값)
localStorage.removeItem(키,값)

• localstorage는 개발자도구 애플리케이션 페이지에 보면 나와있음
• 로컬스토리지(브라우저 닫아도 저장)/세션스토리지(브라우저 닫으면 초기화)의 차이점이 있음
• localStorage는 기본적으로 key/value의 구조로 나타남

let obj = {name:'kim'}
localStorage.setItem('data',obj) // 이렇게하면 value 값에 object이런식으로 나옴
>
let obj = {name:'kim'}
JSON.stringfy(obj)
localStorage.setItem('data',obj) 
>
let outputObj = localStorage.getItem('data')
outputObj.name // 하면 안 읽힘..왜냐? 문자열이기 때문
JSON.parse(outputObj) // obj를 다시 객체형으로 바꿔줌
outputObj.name //이런식으로 출력이 가능해짐

• localStorage를 사용하려면 json으로 모두 문자열로 변환을 해줘야함.

LocalStorage로 최근 본 상품페이지 기획하기

  useEffect(() => {
    let getId = localStorage.getItem("watched");
    getId = JSON.parse(getId);
    getId = new Set(getId); // 중복을 막기 위해서는 set 사용가능
    getId = Array.from(getId); // set으로 중복막은 것을 다시 array로 묶기
    getId.push(props.product[id].id);
    localStorage.setItem("watched", JSON.stringify(getId));
  }, []);

• 우선 최근 본 상품페이지를 하기 위해서는 내가 본 상품의 id를 localStorage에서 계속 변경해줘야한다.
• 그래서 위와 같이 중복을 막기 위해 set과 array.from으로 배열로 다시 묶어주면 해당 값들의 id 값을 불러올 수 있다.
  
• 이제 id 값을 불러왔으니 bar하나를 계속 띄워놓고 거기에 해당 id와 데이터의 정보를 넘겨주면 된다.