[React] localStorage

안녕하세요, 피터팬입니다!

오늘은 localStorage에 대해 배워볼건데요.

localStorage는 개발자 도구(F12 혹은 ctrl+shift+i)에서 보실 수 있습니다.

개발자 도구 > 애플리케이션 > 로컬 스토리지 > chrome-extension/....

브라우저가 열려있는 동안 유지되는 sessionStorage와 달리, localStorage는 브라우저를 닫았다 열어도 데이터가 남아있습니다. 

 

localStorage

; 유효기간 없이 데이터를 저장하고, JS를 사용하거나 브라우저 캐시 또는 로컬 저장 데이터를 지워야만 사라짐

- localStorage환경에 객체를 저장하려면 JSON.stringify를 통해 직렬화를 시켜주어야 함

- localSotrage환경에서 객체를 가져오려면 JSON.parse를 통해 복원시켜주어야 함

 

localStorage 저장 방법

localStorage.setItem('key','value');
localStorage.setItem('diary',JSON.stringify({'a':'b'}));

localStorage 접근 방법

console.log(localStorage.getItem('key'));
console.log(JSON.parse(localStorage.getItem('a')));