Web Storage란?

Web Storage API는 브라우저에서 키/값을 쿠키보다 훨씬 직관적으로 저장할 수 있는 방법을 제공한다. Web Storage의 두 가지 방식은 sessionStorage와 localStorage가 있다.

1. sessionStorage

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

2. localStorage

localStorage는 브라우저를 닫았다가 열어도 데이터가 남아있다.
유효기간 없이 데이터를 저장하고, Javascript를 사용하거나 브라우저 캐시 또는 로컬 저장 데이터를 지워야만 사라진다. 저장공간이 크다.

1) localStorage 에 데이터 저장하기

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

localStorage에 item1라는 key값과 10이라는 value값을 setItem 함수를 통해 저장한다.

localStorage.setItem("item1", 10);

객체를 value로 저장해야 할 경우라면?

객체는 브라우저의 Storage가 받아들일 수 없는 값이기 때문에 JSON.stringify() 메서드를 통하여 직렬화(객체를 문자열로 바꿔줌)를 시켜야한다.

2) localStorage 로부터 데이터 받아오기

useEffect(()=>{
  const item1 = localStorage.getItem('item1');
  const item2 = localStorage.getItem('item2');
  const item3 = JSON.parse(localStorage.getItem('item3'));
  console.log({item1, item2, item3});
},[]);

상수를 지정하여 localStorage로부터 getItem 함수를 통해 받아온 데이터를 담아준다.

const item1 = localStorage.getItem('item1');

localStorage는 데이터의 value값을 숫자로 넣어도 모두 문자열로 변환된다.
그러므로 값을 꺼내쓸 때, 숫자 값은 parseInt()를 사용하여 숫자로 변환하고,
객체는 JSON.parse()를 이용하여 직렬화된 값을 다시 자바스크립트 객체로 복원시켜야 한다.