브라우저 저장소 간단 정리

각 저장소의 기본 특성

저장소	용량	지속성	서버 전송	접근 방식	특이사항
Cookies	약 4KB	설정 가능	✅ 자동 전송	document.cookie	도메인/경로 설정 가능, HttpOnly 및 Secure 설정으로 보안 강화 가능, 크기 제약 큼
LocalStorage	5~10MB	영구 저장	❌	동기적 API	도메인 기준으로 저장, 같은 출처에서만 접근 가능, XSS 공격에 취약할 수 있음
SessionStorage	약 5MB	탭 종료 시 삭제	❌	동기적 API	탭 단위 저장, 새로고침 시 유지되며 탭 닫으면 삭제됨, 다른 탭에서는 접근 불가
IndexedDB	수백 MB 이상	영구 저장	❌	비동기 API	객체 저장 가능, 인덱싱 및 검색 지원, 트랜잭션 처리 가능, 구조화된 데이터에 적합

 

✅ 상황별 추천 정리

1. 로그인 상태를 유지해야 할 때

• Cookies: 자동으로 서버에 전송되는 특성 때문에, 인증이 필요한 요청을 처리하는 데 적합함.
• LocalStorage: 서버에 전송할 필요 없이 클라이언트에서만 토큰을 보관할 때 간편하게 사용할 수 있음.

 

2. 유저 설정(테마, 언어, 뷰 옵션 등)을 기억해야 할 때

• LocalStorage: 새로고침이나 브라우저 재시작 후에도 데이터를 유지하는 특성 때문에, 장기적인 설정 저장에 적합함.
• SessionStorage: 탭 단위로 데이터를 관리하고, 탭을 닫으면 자동 삭제되는 특성 덕분에 단기 설정에 적합함.

 

3. 임시 데이터 (ex. 폼 입력 중인 내용) 저장

• SessionStorage: 사용자가 탭을 닫으면 자동으로 데이터가 사라지는 특성 때문에, 민감하거나 임시적인 데이터 저장에 적합함.

 

4. 대용량 데이터 저장 (ex. 오프라인 메모, 파일 목록, 캐시)

• IndexedDB: 구조화된 데이터를 다룰 수 있고, 수백 MB 수준의 대용량 저장이 가능한 특성 덕분에 복잡한 클라이언트 데이터 보관에 적합함.