localStorage에 특정 데이터 넣기

최근 본 상품기능을 구현하기 위해 localStorage에 봤던 상품데이터를 저장하였다. 몇가지 방법을 생각했는데 하나는 상품을 클릭 했을때 누른 상품의 id값을 localStorage에 저장하는 방법과 다른 하나는 페이지가 로드 됬을때 localStorage데이터 저장을 구현해보았다.

App.js

useEffect를 이용해 상품페이지의 메인 페이지가 로드 되었을때 localStorage에 빈 공백 배열이 저장되게 해 주었다. 그리고 localStorage는 문자열만 저장이 되기 때문에 JSON값으로 변경 해줘야 한다.

useEffect(() => {
    localStorage.setItem("watched", JSON.stringify([]));
  }, []);

localStorage 데이터 추가

localStorage의 데이터 추가 방식은 다른 문법이 있는것이 아닌 데이터를 꺼내와서 추가 한 다음 다시 데이터를 저장 해주어야 한다. 그래서 한단계씩 넣어줘 보면

const findId = shoes.find((el) => el.id === Number(pathid));

useEffect(() => {
    let getitem = localStorage.getItem("watched"); 
  // getItem메서드를 이용해 로컬스토리지의 watched라고 명시 되어있는 값을 가져온다.
    getitem = JSON.parse(getitem); 
  // 가져온 값은 JSON값이기 때문에 parse를 시겨준다.
    getitem.push(findId.id);
  // 만들어둔 id값을 찾는 findId 변수를 getitem에 push 해준다.
    localStorage.setItem("watched", JSON.stringify(getitem));
  }, []);
// push한 값을 setItem메서드를 이용해 watched라는 이름의 key의 value로 넣어준다.

눌러보았던 아이템의 id값이 잘 들어가는것을 볼 수 있지만 중복되게 눌렀을때도 값이 다 들어가는것을 볼 수 있다. 중복제거를 위해 if문이나 for문을 사용할 수 있지만 Set자료형을 이용하면 조금 더 간단하게 중복제거를 할 수 있다.

const findId = shoes.find((el) => el.id === Number(pathid));

useEffect(() => {
    let getitem = localStorage.getItem("watched");
    getitem = JSON.parse(getitem);
    getitem.push(findId.id);
    getitem = new Set(getitem);
  //  getitem을 Set자료형으로 바꿔준다.
    getitem = Array.from(getitem);
  // 그냥 리턴을 해면 object형식으로 되버려 데이터가 들어가지 않으므로 Array.from메서드를 사용해 Set자료형을 arr로 변경 해준다.
    localStorage.setItem("watched", JSON.stringify(getitem));
  }, []);

Set자료형을 이용하면 중복되는 자료들을 간단하게 제거 가능하다. 이제 localStorage에 넣은 값을 활용해 사용자가 보았던 페이지의 값을 활용할 수 있다.