LocalStorage vs SessionStorage 살펴보기

Sep 01, 2023

Contents

웹 스토리지(Web Storage)란?LocalStorage vs SessionStorage WebStorage 사용법 (JavaScript)마무리

웹 애플리케이션을 개발할 때 데이터를 클라이언트 측에 저장해야 할 경우가 있습니다. 주로 쿠키나 웹 스토리지를 사용하는데, 그 중 웹 스토리지의 두 종류인 ‘LocalStorage’와 ‘SessionStorage’를 정리해 보려 합니다.

웹 스토리지(Web Storage)란?

우선 웹 스토리지에 대해 알아보면, 웹 스토리지는 브라우저에서 키와 값의 형태로 데이터를 저장할 수 있는 클라이언트 측 저장소입니다. 이는 쿠키(Cookie)와는 달리, 데이터의 크기 제한이 크고, 서버에 자동으로 데이터가 전송되지 않아 성능에 더 유리한 특징을 가집니다.

브라우저 개발자도구를 이용하여 저장소에 저장된 값을 확인할 수 있습니다.

브라우저별 저장소

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

Firefox: 개발자도구 → 저장소

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

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

ㅤ	Cookie	Web Storage
구조	‘Cookie-name : Cookie-value’	‘Key : Value’
저장 데이터	문자열	문자열 객체
용량	약 4KB	약 10MB
갯수	약 150개	제한 없음
소멸 시간 설정	가능	불가능
자원 소모	많음 (매번 서버로 전송)	적음 (필요한 경우에만 전송)

[출처]

웹 스토리지 - 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에 대해 알아보겠습니다.

가장 큰 차이점은 소멸 시점과 접근범위입니다.

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

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

이에 따라 활용 용도에 따라 저장소를 결정 해야 합니다. 클라이언트 저장소를 사용하는 몇 가지 사례들을 살펴보겠습니다.

💡

사례 1. 멀티 탭 다중 로그인 방지

SessionStorage의 경우 다른 탭(세션)에서 접근이 불가능 하므로, 해당 경우에는 LocalStoage를 사용해야 합니다.

💡

사례 2. 다국어 페이지 언어 선택

사용자가 보고 있는 탭에서만 언어 선택이 바뀌어야 한다면, SessionStorage가 적당합니다.

💡

사례 3. 광고 다시 보지 않기 클릭

사용자가 브라우저를 닫고, 이후에도 해당 광고를 보지 않게 하기 위해서 LocalStorage를 사용해야 합니다.

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();