Web Storage
클라이언트 사이드 데이터 저장소
Web Storage API는 브라우저 내에 키-값(Key-Value) 쌍으로 데이터를 안전하게 저장할 수 있는 메커니즘을 제공합니다.
과거에 널리 쓰이던 쿠키(Cookie)보다 저장 용량이 훨씬 크고(약 5MB), 매번 서버에 요청할 때마다 헤더에 포함되어 불필요한 트래픽을 유발하지 않으므로 네트워크 성능 측면에서도 매우 유리합니다.
과거에 널리 쓰이던 쿠키(Cookie)보다 저장 용량이 훨씬 크고(약 5MB), 매번 서버에 요청할 때마다 헤더에 포함되어 불필요한 트래픽을 유발하지 않으므로 네트워크 성능 측면에서도 매우 유리합니다.
1. 개인 금고와 코인 락커 (비유)
데이터를 언제까지 보관할 것인지에 따라 두 가지 저장소를 골라 쓸 수 있습니다.
🗄️
개인 금고 (localStorage)
브라우저를 껐다 켜도, 컴퓨터를 재부팅해도 데이터가 영구적으로 보존됩니다. (다크모드 설정, 자동 로그인 토큰 등)
⏱️
코인 락커 (sessionStorage)
현재 열려있는 브라우저 탭(세션) 안에서만 유지되며, 탭을 닫으면 즉시 소멸합니다. (일회성 폼 입력값, 보안 세션 등)
2. Web Storage의 구조와 생명주기
3. 필수 문법 정리
| 메서드 (Method) | 설명 및 역할 |
|---|---|
setItem('key', 'value') |
데이터를 저장합니다. 값(value)은 반드시 문자열(String) 형태로만 저장됩니다. 객체를 저장하려면 JSON.stringify()가 필요합니다. |
getItem('key') |
키를 이용해 저장된 데이터를 불러옵니다. 데이터가 없으면 null을 반환합니다. |
removeItem('key') |
특정 키에 해당하는 데이터만 삭제합니다. |
clear() |
해당 도메인의 스토리지에 저장된 모든 데이터를 일괄 삭제합니다. |
<div class="storage-demo">
<h3>Web Storage 테스트</h3>
<div class="controls">
<button id="btnSaveLocal" class="btn primary">로컬 스토리지에 저장 (영구)</button>
<button id="btnSaveSession" class="btn secondary">세션 스토리지에 저장 (일시)</button>
<button id="btnLoad" class="btn success">저장된 값 불러오기</button>
<button id="btnClear" class="btn danger">스토리지 모두 지우기</button>
</div>
</div>