로컬 스토리지로 만드는 최근의 본 상품 기능 1

localStorage를 이용하면 브라우저에 문자를 저장 가능.
5MB까지 저장 가능.
쇼핑몰을 만든다면 비회원 장바구니 같은 거 만들 때도 좋을 것 같음.

1. 사용법

데이터 입력
localStorage.setItem('데이터명', '데이터');

데이터 출력
localStorage.getItem('데이터 이름');

데이터 출력
localStorage.removeItem('데이터 이름')

수정 기능은 따로 없음.
jsx 페이지에서 적절히 불러와서 수정 후
다시 setItem 해주기.

2. Array/object 자료를 저장하려면

무언가를 저장할 때 문자만 저장 가능.
이를 해결하기 위해 json으로 바꾸어 저장하면 편법으로 저장 가능.

아래와 같이 쓰면.
localStorage.setItem('obj', JSON.stringify({name:'kim'}) );

다음과 같이 저장된다.
"{"name":"kim"}"

3. 다시 한번 JSON->array/object 변환하고 싶다면?

JSON.parse()사용하기.

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

이러면 다시 원래형태로 변경가능.

4.오늘의 숙제

최근 본 상품 UI 기능 만들기
localStorage에 watched 값을 배열로 하나 생성.
App페이지 들어갈때 useEffect []로 한번만 동작하게 하면 될듯.
detail페이지에 들어가면 해당 페이지의 상품id를 watched배열에 넣기.
find 등을 사용하여 중복제거.

직접해본 코드

1. App.jsx에 useEffect로 페이지 렌더링될 때 1회, localStorage에 최근본 상품목록을 새로 생성
2. detail.jsx에 useEffect로 유저가 입력한 URL 파라미터값(id)과 동일한 값이 localStorage에 있나 체크. 있다면 패스, 없다면 localStorage에 id값 추가.

//App.jsx
  useEffect(() => {
    let watchedArr = [];

    localStorage.setItem("watched", JSON.stringify(watchedArr));
  }, []);
//detail.jsx
  //최근 본 목록에 상품 id 추가
  useEffect(() => {
    let watchedArr = JSON.parse(localStorage.getItem("watched"));
    //처음 보는 상품일 때, 기존 꺼 지우고 새로 생성
    let idCk = watchedArr.find((idCk) => idCk == id);
    if (idCk == undefined || idCk == null) {
      watchedArr = [parseInt(id, 10), ...watchedArr];
      localStorage.removeItem("watched");
      localStorage.setItem("watched", JSON.stringify(watchedArr));
    }
  });