2026-01-16
브라우저 저장소(Storage)
브라우저 저장소란?
브라우저에 데이터를 클라이언트 측에 저장하는 공간
- Cookie
- LocalStorage
- SessionStorage
- IndexedDB (심화)
저장소 한눈에 비교
| 구분 | Cookie | LocalStorage | SessionStorage | IndexedDB |
|---|---|---|---|---|
| 저장 위치 | 브라우저 | 브라우저 | 브라우저 | 브라우저 |
| 용량 | 매우 작음 (~4KB) | 큼 (~5MB) | 큼 (~5MB) | 매우 큼 |
| 만료 | 설정 가능 | 영구 | 탭 종료 시 | 영구 |
| 서버 전송 | ⭕ 매 요청 포함 | ❌ | ❌ | ❌ |
| JS 접근 | ⭕(HttpOnly 없을때) | ⭕ | ⭕ | ⭕ |
| 보안 | 옵션 설정 없으면 낮음 | 보통 | 보통 | 보통 |
1. Cookie
- 서버와 클라이언트가 함께 사용하는 저장소
- HTTP 요청 시 자동으로 서버에 전송
특징
- 용량 작음
- 만료 시간 설정 가능
- 인증/세션 관리에 사용 (서버로 전송됨)
- 이름/값의 쌍으로 구성
- 쿠키 필수 옵션
- HttpOnly
- JS 접근 차단 (XSS 방어)
- Secure
- HTTPS에서만 전송
- SameSite
- 크로스 사이트 요청 시 쿠키 전송 제어 (CSRF 방어)
- HttpOnly
단점
- 모든 요청에 포함 → 성능 저하 가능
- 보안 취약(CSRF 위험: Cookie는 자동 전송 → CSRF 공격 대상)
사용 예시
- 사용자 로그인 정보
- 하루동안 보지 않기
- 장바구니
- 검색기록 등
2. LocalStorage
- 브라우저에 영구 저장
- 탭/브라우저 닫아도 유지
- 동일한 도메인 전역 공유
특징
- 서버에 자동 전송 X
- 데이터 형식 제한 (문자열만 저장 가능)
- 동기 API
- 보안 취약(XSS위험: LocalStorage / SessionStorage는 JS 접근 가능 → 탈취 위험)
사용 예시
- 다크모드 설정, 테마
- 언어 설정
- 자동 로그인 토큰(JWT 주의)
3. SessionStorage
- 탭 단위 저장소
- 탭 닫으면 데이터 삭제 (임시저장)
특징
- LocalStorage와 API 동일
- 탭(브라우저) 간 공유 X
사용 예시
- 임시 폼 데이터
- 한 세션에서만 유지해야 하는 정보
4. IndexedDB (심화)
- 브라우저 내 비정형 대용량 DB
- 객체 단위 저장 가능
특징
- 비동기 API
- 대용량 데이터 저장 가능
사용 예시
- 오프라인 웹앱
- 캐시 데이터
- 복잡한 데이터 구조
요약
- Cookie: 서버와 공유, 인증
- LocalStorage: 영구 저장
- SessionStorage: 탭 단위
- IndexedDB: 대용량