브라우저에 문자열 키-값을 저장하는 Web Storage API의 두 가지. 쿠키와 달리 요청에 자동으로 실리지 않고, 출처 단위로 나뉘며(동일 출처 정책), 보통 출처당 5MB 안팎을 쓸 수 있다. 동기 API라 큰 데이터를 자주 읽고 쓰면 메인 스레드를 막는다.
| 동작 | localStorage | sessionStorage |
|---|---|---|
| 새로고침 | 유지 | 유지 |
| 같은 탭에서 같은 출처 페이지 이동 | 유지 | 유지 |
| 같은 사이트를 새 탭으로 열기 | 공유 | 탭마다 따로 |
| 탭 복제 | 공유 | 그 시점 값을 복사해 따로 |
| 탭 닫기 | 유지 | 삭제 |
| 브라우저 재시작 | 유지 | 보통 삭제(세션 복원 기능이 살리기도 함) |
새로고침했는데 sessionStorage 값이 사라진다면 저장소 특성이 아니라 코드 어딘가가 초기화하고 있을 가능성이 크다.
storage 이벤트로 탭 간 동기화
같은 출처의 다른 탭에서 localStorage가 바뀌면 storage 이벤트가 온다. 값을 바꾼 탭 자신에게는 오지 않는다. 이벤트에는 key, oldValue, newValue, url, storageArea가 담긴다.
// 로그아웃한 탭: 신호를 남긴다
localStorage.setItem('logout', Date.now().toString())
// 나머지 탭: 신호를 받으면 함께 로그아웃
addEventListener('storage', e => {
if (e.key === 'logout') location.href = '/'
})서버 없이 로그인 상태, 장바구니, 설정을 여러 탭에 맞출 수 있다. React에서 이런 외부 저장소를 구독할 때는 useSyncExternalStore가 맞는 도구다.
주의
- 같은 출처의 모든 스크립트가 읽을 수 있으므로 XSS(Cross-Site Scripting)에 노출된다. 토큰을 여기 두면 CSRF(Cross-Site Request Forgery) 위험은 줄지만 XSS 위험을 떠안는다 → JWT
- 문자열만 저장하므로 객체는
JSON.stringify로 바꾼다 - 큰 데이터나 구조화된 데이터는 비동기 API인 IndexedDB를 쓴다
- 앱 안 웹뷰의 Web Storage는 앱의 네이티브 저장소와 자동으로 공유되지 않는다 → 모바일 네이티브 저장소