FrontEnd | localStorage와 sessionStorage의 차이점

Web Storage 완벽 정리: localStorage vs sessionStorage 차이점 분석

프론트엔드 개발에서 사용자 데이터를 클라이언트에 저장하고 관리하는 것은 매우 중요합니다. 이때 활용되는 것이 바로 Web Storage API이며, 그 중심에는 localStorage와 sessionStorage가 있습니다. 이 둘은 비슷해 보이지만, 데이터의 영속성(Persistence)과 접근 범위에 결정적인 차이가 있습니다.

이 포스팅에서는 localStorage와 sessionStorage의 공통점과 차이점을 명확히 비교하여, 어떤 상황에 어떤 스토리지를 사용해야 할지 확실히 이해할 수 있도록 정리했습니다.

---

🔍 공통점: Web Storage의 특징

localStorage와 sessionStorage는 모두 Web Storage의 일부로서 다음과 같은 공통점을 가집니다.

• 저장 공간: 대부분의 브라우저에서 최소 5MB에서 최대 10MB 정도의 넉넉한 저장 공간을 제공합니다. 이는 4KB로 제한되는 쿠키(Cookie)에 비해 훨씬 큰 용량입니다.
• 저장 데이터 형식: 두 스토리지 모두 문자열(String) 형태의 Key-Value 쌍으로 데이터를 저장합니다. 객체나 배열을 저장하려면 JSON.stringify()를 사용하여 문자열로 직렬화해야 하며, 다시 사용할 때는 JSON.parse()로 역직렬화해야 합니다.
• 서버 전송 없음: 쿠키와 달리, Web Storage에 저장된 데이터는 HTTP 요청 시 서버로 자동으로 전송되지 않습니다. 따라서 불필요한 네트워크 트래픽을 줄일 수 있습니다.
• 접근 범위: 두 스토리지 모두 동일한 출처(Origin), 즉 도메인(Domain), 프로토콜(Protocol), 포트(Port)가 같을 때만 접근이 가능합니다. 다른 출처에서는 데이터를 읽거나 쓸 수 없습니다.
• 조작 방식: 데이터 조작(저장, 조회, 삭제)은 JavaScript를 통해서만 가능합니다.

---

🚀 결정적인 차이점: 영속성과 범위

두 스토리지의 가장 핵심적인 차이는 데이터가 얼마나 오래 유지되는지와 어디까지 공유되는지입니다.

구분	localStorage (로컬 스토리지)	sessionStorage (세션 스토리지)
데이터 영속성 (Persistence)	영구적 (Permanent)	일시적 (Temporary)
만료 시점	사용자가 명시적으로 삭제하거나, 브라우저 캐시/데이터를 삭제할 때까지 유지.	브라우저 탭/창이 닫힐 때 자동 소멸.
데이터 공유 범위	동일 출처의 모든 탭/창에서 데이터 공유.	현재 브라우저 탭 내에서만 유지 및 공유. (다른 탭/창과 공유 안 됨)
주요 용도	자동 로그인, 다크 모드 설정, 사용자 선호 설정, 오랜 기간 보존해야 하는 데이터.	일회성 로그인 상태, 비회원 장바구니, 임시 입력 값, 현재 세션 내에서만 필요한 데이터.

1. 데이터 영속성 (Persistence)

• localStorage: 데이터를 저장하면 영구적으로 유지됩니다. 브라우저를 닫았다가 다시 열어도, 컴퓨터를 껐다가 켜도 데이터는 그대로 남아 있습니다. 마치 영구적인 보관함과 같습니다.
  • 데이터를 지우려면 JavaScript 코드(localStorage.removeItem(), localStorage.clear())를 사용하거나, 사용자가 브라우저 설정에서 직접 삭제해야 합니다.
• sessionStorage: 데이터가 세션 기간 동안만 유지됩니다. 여기서 세션이란 현재 열려있는 브라우저 탭 또는 창을 의미합니다. 사용자가 해당 탭을 닫는 순간, 저장된 데이터는 자동으로 소멸됩니다.

2. 데이터 공유 범위

• localStorage: 동일한 출처(Origin)라면 여러 개의 탭이나 창 간에 데이터가 공유됩니다. 한 탭에서 localStorage에 데이터를 저장하면, 같은 출처를 가진 다른 탭에서도 즉시 해당 데이터에 접근할 수 있습니다.
• sessionStorage: 데이터가 오직 해당 탭(Session) 내에서만 유지됩니다. 동일한 웹사이트를 새로운 탭이나 창으로 열면, 이는 새로운 독립적인 세션으로 간주되어 sessionStorage의 데이터가 공유되지 않습니다.

---

💡 언제 무엇을 사용해야 할까?

스토리지	사용 예시
localStorage	사용자 선호 설정 (다크/라이트 모드, 폰트 크기 등), 자동 로그인 토큰 (장기간 유지), 오래 유지되어야 할 캐시 데이터.
sessionStorage	일회성 인증 토큰 (세션 기간 동안만 유지), 비회원 장바구니 데이터 (탭 닫으면 소멸), 현재 페이지의 스크롤 위치 (임시 저장), 민감하지만 세션 내에서만 필요한 데이터.

🔑 핵심 정리:

데이터가 브라우저를 닫아도 남아있어야 한다면 →  localStorage,

데이터가 현재 탭을 닫으면 사라져야 한다면 → sessionStorage를 사용하세요!

---

💻 사용 예시 (JavaScript)

두 객체의 사용법은 동일합니다. localStorage 대신 sessionStorage로 바꾸기만 하면 됩니다.

기능	localStorage	sessionStorage
데이터 저장	localStorage.setItem('key', 'value');	sessionStorage.setItem('key', 'value');
데이터 조회	localStorage.getItem('key');	sessionStorage.getItem('key');
데이터 삭제	localStorage.removeItem('key');	sessionStorage.removeItem('key');
전체 삭제	localStorage.clear();	sessionStorage.clear();

 

// LocalStorage에 데이터 저장 (영구적)
localStorage.setItem('theme', 'dark');

// SessionStorage에 데이터 저장 (탭 종료 시 삭제)
sessionStorage.setItem('tempToken', 'abcdefg12345');

// 데이터 조회
const currentTheme = localStorage.getItem('theme');
console.log(`현재 테마: ${currentTheme}`); // "dark"

// 데이터 삭제
// localStorage.removeItem('theme'); 
// sessionStorage.clear(); // 현재 세션 스토리지의 모든 데이터 삭제