미라클 메모리

목차

Web Storage

Web Storage API - Web API | MDN

Session Storage

• sessionStorage는 각각의 출처에 대해 독립적인 저장 공간을 페이지 세션이 유지되는 동안(브라우저가 열려있는 동안) 제공합니다.
  • 세션에 한정해, 즉 브라우저 또는 탭이 닫힐 때까지만 데이터를 저장합니다.
  • 데이터를 절대 서버로 전송하지 않습니다.
  • 저장 공간이 쿠키보다 큽니다. (최대 5MB)

Local Storage

• localStorage도 위와 같지만, 브라우저를 닫았다 열어도 데이터가 남아있습니다.
• 유효기간 없이 데이터를 저장하고, JavaScript를 사용하거나 브라우저 캐시 또는 로컬 저장 데이터를 지워야만 사라집니다.
• 저장 공간이 (세션,쿠키,로컬)셋 중 제일 큽니다.

LocalStorage 활용하기

useEffect(() => {
    localStorage.setItem("key", 10);
  }, []);

타입에 따른 저장 방식

useEffect(() => {
    localStorage.setItem("item1", 10);
    localStorage.setItem("item2", "20");
    localStorage.setItem("item3", { value: 30 });
  }, []);

직렬화