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(); // 현재 세션 스토리지의 모든 데이터 삭제
반응형
'컴퓨터 과학 > 🔆 프로그래밍' 카테고리의 다른 글
| 서버사이드 렌더링과 클라이언트 사이드 렌더링 (1) | 2025.01.21 |
|---|---|
| 절차형 프로그래밍 (2) | 2024.09.16 |
| 객체지향 프로그래밍 (1) | 2024.09.16 |
| 선언형과 함수형 프로그래밍 (0) | 2024.09.16 |
| 프로그래밍 패러다임 (0) | 2024.09.16 |