웹에서 사용하는 저장소 종류

---

✅ 1. 쿠키 (Cookies)

• 목적: 주로 서버와 클라이언트 간에 소량의 데이터를 주고받기 위해 사용.
• 크기 제한: 약 4KB.
• 수명: 만료일 지정 가능 (지정 없으면 세션 쿠키 → 브라우저 종료 시 삭제).
• 특징:
  • 매 HTTP 요청 시 서버에 자동 전송됨.
  • 도메인, 경로, 보안(HTTPS) 설정 가능.
  • 보안에 취약할 수 있으므로 민감 정보는 저장 금지.

---

✅ 2. 로컬 스토리지 (LocalStorage)

• 목적: 브라우저에 영구적으로 데이터 저장.
• 크기 제한: 약 5~10MB (브라우저마다 조금 다름).
• 수명: 수동으로 삭제하거나 클라이언트가 명시적으로 localStorage.clear() 할 때까지 유지됨.
• 특징:
  • 같은 도메인 내에서는 모든 탭/윈도우에서 공유.
  • 서버로 자동 전송되지 않음.
  • 문자열 데이터만 저장 가능 (JSON으로 직렬화 필요).

---

✅ 3. 세션 스토리지 (SessionStorage)

• 목적: 브라우저 탭(또는 창)별 임시 데이터 저장.
• 크기 제한: LocalStorage와 유사 (~5MB).
• 수명: 탭이나 창을 닫으면 데이터 사라짐.
• 특징:
  • 같은 도메인이라도 탭 간에는 공유되지 않음.
  • 서버로 전송되지 않음.
  • 문자열만 저장 가능 (JSON 필요).

---

✅ 4. IndexedDB

• 목적: 구조화된 대용량 데이터를 클라이언트에 저장.
• 크기 제한: 수백 MB 이상 가능 (브라우저 정책에 따라 제한).
• 수명: LocalStorage처럼 영구적.
• 특징:
  • 객체 형식 데이터 저장 가능 (JSON, Blob, File 등).
  • 비동기 API (Promise, 이벤트 기반).
  • 인덱싱, 쿼리 가능 (간이 데이터베이스 역할).
  • 상대적으로 복잡한 API.

---

✅ 5. 캐시 저장소 (Cache Storage / Cache API)

• 목적: 서비스 워커와 함께 사용하여 리소스 (HTML, CSS, JS, 이미지 등)를 캐싱.
• 크기 제한: 수백 MB 이상 (브라우저별 정책 다름).
• 수명: 개발자가 삭제하거나 브라우저 캐시 정책에 따라 관리.
• 특징:
  • 오프라인 동작 지원 (PWA).
  • 요청/응답 객체 자체를 저장 (fetch와 연계).

---

📌 요약 표

저장소 종류 크기 제한 수명 서버 전송 용도

쿠키	~4KB	만료일/세션 종료	O	인증, 세션 유지, 작은 데이터
LocalStorage	~5-10MB	영구	X	사용자 설정, 캐싱 데이터
SessionStorage	~5MB	탭/창 닫으면 삭제	X	탭/창 단위 데이터
IndexedDB	수백 MB+	영구	X	구조화 데이터, 대용량 데이터
Cache Storage	수백 MB+	개발자/브라우저 관리	X	정적 파일 캐싱, 오프라인 지원 (PWA)

---

🚀 어떤 경우에 뭘 써야 하나요?

• 쿠키: 인증 토큰, 세션 ID 필요 시.
• LocalStorage: 사용자 테마, 앱 설정 등 지속적 데이터.
• SessionStorage: 임시 데이터 (예: 폼 입력 임시 저장).
• IndexedDB: 오프라인 데이터베이스, 파일 캐싱, 대용량 리스트.
• Cache API: PWA, 정적 자원 캐싱.

---