localStorage

• 웹페이지를 새로고침하면 State가 초기값으로 돌아간다.
  • 서버로 보내서 DB에 영구 저장하면 된다.
  • 차선책으로 localStorage에 저장해도 되는데, 반영구적 저장이 가능하다 !

Overview

• 개발자도구 - application - localStorage
• key: value string 값으로 저장가능하며 최대 페이지당 5MB까지만 저장가능하다.
• 새로 고침시 브라우저 청소하지 않으면 삭제되지 않고 남아있다.
• 삭제하려면 항목 클릭 - delete key
• Storage는 LocalStorage, SessionStorage가 있는데, 전자는 비휘발성, 후자는 휘발성이있다. 이는 브라우저를 껐냐를 기준으로 한다. 이 외에도 여러 Storage들 있다.

Try

Create

• console - localStorage.setItem('key', 'value')

Read

• data를 꺼내오는 방법

Remove

• 삭제하는 방법

Update

• update 하는 방법없이 알아서 그냥 Overwrite해서 넣어줘야됨

ETC

let obj = {name: 'kim'};

localStorage.setItem('data', JSON.stringify(obj));

• array/object는 Json 형태로 문자로 취급하여 저장해야된다. 해당 타입으로 저장할 수는 없다.

let myObj = localStorage.getItem('data');

myObj = JSON.parse(myObj);
console.log(myObj.name);

• Storage에서 꺼내면 string이므로 해당 객체로 parse를 잘 해줘야한다.

React Example

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

• App 컴포넌트 즉, main에서 해당 컴포넌트를 초기화해준다.

useEffect(() => {
        let obj = localStorage.getItem("watched");
        obj = JSON.parse(obj);
        obj.push(seletedDetail.id);
        obj = new Set(obj);
        obj = Array.from(obj);
        localStorage.setItem("watched", JSON.stringify(obj));
    }, [])

• Detail과 같은 컴포넌트에서 로딩 시, LocalStorage에서 값을 가져오고, 업데이트해준다.
• redux-persist 라는 라이브러리 같이 (Jotai, Zustand 등) 기능들을 이용하면 더 쉽게 state 형태 또는 데이터로 localStorage에 저장할 수 있다.