[React] localStorage와 sessionStorage

react.js

localStorage 와 sessionStorage란?

localStorage와 sessionStorage 두가지 방법 모두 애플리케이션 전역에 접근 가능하다는 공통점이 있다.

각 storage에 저장된 데이터는 모두 문자열만 사용 가능하기 때문에 다른 타입의 데이터를 사용할 때에는 JSON 형태로 별도 가공이 필요하다.

 

두가지 방법의 차이점은 저장되는 데이터의 범위가 다르다는 점이다. 

 

localStorage는 동일한 pc안에서 동일한 브라우저를 사용했을 때에 사용한다.

데이터를 직접 삭제하지 않는 한 브라우저를 닫아도 저장된 데이터를 불러올 수 있는 장점이 있고,

주로 로그인 시 '아이디저장' 기능을 탑재한 모바일웹에서 자주 쓰인다.

 

sessionStorage는 브라우저 창이 닫히면 세션이 종료되면서 storage에 저장된 데이터도 소멸된다.

 

 

localStorage 와 sessionStorage 선언

localStorage와 sessionStorage API

localStorage와 sessionStorage 두가지 모두  setItem(key, value) 형태로 데이터를 store에 저장하고,  getItem(key) 를 사용하여 저장된 데이터를 store에서 가져올 수 있습니다.

//localStorage
localStorage.setItem('seq', 1234);
localStorage.getItem('seq');

//sessionStorage
sessionStorage.setItem('seq', 1234);
sessionStorage.getItem('seq');

또한, 아래 코드를 사용하여 저장된 키와 데이터를 일부 또는 모두 삭제할 수 있습니다.

//localStorage
localStorage.removeItem('seq');
localStorage.clear();

//sessionStorage
sessionStorage.removeItem('seq');
sessionStorage.clear();

그 외에 localStrage.length를 사용하여 저장된 데이터의 개수를 얻어올 수 있다.