Web Storage

• 따라하며 배우는 리액트 A-Z를 수강하며 개인적으로 메모한 내용입니다.

---

배경

• state 변수는 페이지를 새로고침하게 되면 캐시값이 사라짐.
• 작업을 하다보면 저장해야 할 데이터가 생기기 마련
• 서버에 저장하기엔 데이터의 중요도가 낮음

이때 클라이언트(브라우저) 단에 데이터를 저장할 수 있는 기능인 Web Storage 를 사용하면 되는데, 두 종류가 있다.
1. localStorage :브라우저에 저장되어 웹 페이지 세션이 끝나도 데이터 소멸 x, 같은 브라우저라면 여러 탭과 창 간에 데이터 공유 O
2. sessionStorage : 웹 페이지의 세션이 끝날 때 데이터가 소멸

사용법

//데이터 저장
localStorage.setItem(<키_값>, <데이터>);
sessionStorage.setItem(<키_값>, <데이터>);
//데이터 반환
localStorage.getItem(<키_값>);
sessionStorage.getItem(<키_값>);

응용

//삼항연산자를 이용하여 local데이터가 있으면 초기화 시켜주기
const initialData = localStorage.getItem(<키_값>)
  ? JSON.parse(localStorage.getItem(<키_값>)) : [] ;

※ 데이터에 객체나 배열을 저장해줄시에는 JSON.stringfy 를 이용해서 텍스트로 변환해준 후에 저장해야 한다. (안하면 Object 등으로 저장된다.)
반대로 get할때에는 JSON.parse사용.

Storage 지우기

localStorage.removeItem(<키_값>);
//콘솔에 입력시
window.localStorage.removeItem(<키_값>);