LocalStorage vs SessionStorage 살펴보기

웹 스토리지(Web Storage)란?

브라우저별 저장소

• Microsoft Edge: 개발자도구 → 응용프로그램 → 저장소

• Firefox: 개발자도구 → 저장소

• Chrome: 개발자도구 → 애플리케이션

 

쿠키(Cookie) vs 웹 스토리지(Web Storage)

• 웹 스토리지 - https://developer.mozilla.org/en-US/docs/Web/API/Storage_API/Storage_quotas_and_eviction_criteria#web_storage

• 쿠키 - https://www.tutorialspoint.com/What-is-the-maximum-size-of-a-web-browser-s-cookies-value

LocalStorage vs SessionStorage

• LocalStorage: 소멸 시점을 직접 설정해야 하고, 같은 브라우저에서 소멸 이전까지 저장소를 공유합니다.

• SessionStorage: 세션을 종료하면 데이터가 소멸되고, 해당 세션에 대한 저장소만 접근이 가능합니다.

WebStorage 사용법 (JavaScript)

• LocalStorage

// LocalStorage에 데이터 저장하기
localStorage.setItem('myKey', 'myValue');

// LocalStorage에서 데이터 가져오기
const value = localStorage.getItem('myKey'); // value: 'myValue'

// LocalStorage에서 데이터 지우기
localStorage.removeItem('myKey');

// LocalStorage 모든 데이터 지우기
localStorage.clear();

• SessionStorage

// SessionStorage에 데이터 저장하기
sessionStorage.setItem('mySessionKey', 'mySessionValue');

// SessionStorage에서 데이터 가져오기
const sessionValue = sessionStorage.getItem('mySessionKey'); // sessionValue: 'mySessionKey'

// SessionStorage에서 데이터 지우기
sessionStorage.removeItem('mySessionKey');

// SessionStorage모든 데이터 지우기
sessionStorage.clear();

실습

마무리