브라우저 저장 공간: 쿠키, 스토리지, IndexedDB

📄 요약

웹 브라우저는 클라이언트에 데이터를 저장할 수 있는 여러 가지 방식을 제공한다.

• 쿠키: 서버와 통신할 때 함께 전송되는 작은 데이터 조각
• 웹 스토리지(LocalStorage, SessionStorage): 간단한 키-값 형태의 데이터를 클라이언트에 저장
• IndexedDB: 구조화된 대용량 데이터를 저장할 수 있는 클라이언트 측 DB(주로 오프라인 애플리케이션에 사용됨)

각 저장소는 저장 용량, 만료 정책, 사용 방식(API의 복잡도) 면에서 뚜렷한 차이가 있다.

💡 주요 개념

🍪 쿠키 (Cookie)

• 주요 용도: 서버와 클라이언트 간 상태 유지를 위한 수단. 주로 로그인 인증, 사용자 행동 추적 등에 사용된다.

• 특징:

  • 용량 제한: 약 4KB로 매우 적은 데이터를 저장할 수 있다.
  • 자동 전송: 모든 HTTP 요청에 자동 포함되어 서버로 전송됨 → 불필요한 트래픽을 유발할 수 있음.
  • 만료 설정 가능: Expires 또는 Max-Age 속성으로 만료 시점을 지정할 수 있음.
  • 문자열만 저장 가능: 구조화된 객체 저장은 불가능하고, 직접 직렬화해야 함.

📦 웹 스토리지 (Web Storage)

• 주요 용도: 네트워크와 무관한 클라이언트 측 상태 저장. 사용자 설정, UI 상태 등에 활용됨.

• 특징:

  • 상대적으로 넉넉한 저장 공간: 약 5MB~10MB.
  • HTTP 요청에 포함되지 않음: 서버와의 통신에는 영향을 주지 않음.
  • 간단한 사용법: 동기 방식의 setItem, getItem, removeItem 등 직관적인 API 제공.

• 구분:

  • LocalStorage: 브라우저를 닫아도 데이터가 유지됨.
  • SessionStorage: 탭 또는 창을 닫으면 데이터가 삭제됨.

🗄️ IndexedDB

• 주요 용도: 대용량의 구조화된 데이터를 클라이언트에 저장. 오프라인 사용, 캐싱 등에 적합함.

• 특징:

  • 대용량 지원: 수백 MB에서 수 GB까지 저장 가능.
  • 객체 저장 가능: JSON, 배열, Blob 등 다양한 형태의 데이터를 저장할 수 있음.
  • 비동기 방식: 모든 작업이 비동기로 처리되어 UI를 차단하지 않음.
  • 트랜잭션 지원: 원자성, 일관성을 보장하는 트랜잭션 기반의 처리 지원.

💡 간단 정리

저장소	수명	보안	용량	주요 용도
쿠키	설정된 만료일까지	✅ HttpOnly 가능	❌ 4KB	인증, SSR용 상태 유지
LocalStorage	영구 (삭제 전까지)	❌ XSS 취약	⭕ 5~10MB	사용자 설정, 캐시
SessionStorage	탭/창 종료 시	❌ XSS 취약	⭕ 5~10MB	임시 상태 저장
IndexedDB	영구	⭕ (직접 암호화 가능)	⭕ 수백MB~GB	대용량, 구조화 데이터

🧠 코드 예시

// --- 🍪 쿠키 ---
const date = new Date();
date.setTime(date.getTime() + 24 * 60 * 60 * 1000); // 1일 뒤 만료
document.cookie = `username=JohnDoe; expires=${date.toUTCString()}; path=/`;


// 쿠키 읽기 함수
const getCookie = (name) => {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
};
console.log('Cookie username:', getCookie('username'));


// --- 📦 웹 스토리지 ---
localStorage.setItem('theme', 'dark');
console.log('LocalStorage theme:', localStorage.getItem('theme'));

sessionStorage.setItem('tempId', 'abc-123');
console.log('SessionStorage tempId:', sessionStorage.getItem('tempId'));


// --- 🗄️ IndexedDB ---
const request = indexedDB.open('myAppDB', 1);

request.onupgradeneeded = (event) => {
  const db = event.target.result;
  db.createObjectStore('users', { keyPath: 'id' });
};

request.onsuccess = (event) => {
  const db = event.target.result;

  const tx = db.transaction(['users'], 'readwrite');
  const store = tx.objectStore('users');
  store.add({ id: 'user1', name: 'Alice', email: 'alice@example.com' });

  const getReq = store.get('user1');
  getReq.onsuccess = () => {
    console.log('IndexedDB user:', getReq.result);
  };

  tx.oncomplete = () => {
    console.log('IndexedDB 트랜잭션 완료');
    db.close();
  };
};

request.onerror = (event) => {
  console.error('IndexedDB error:', event.target.errorCode);
};

🔍 더 알아보기

1. PWA (Progressive Web App): 오프라인 저장소로 IndexedDB를 활용
2. Web Workers: 웹 스토리지나 IndexedDB 접근 시 UI 차단을 피하기 위한 병렬 처리 수단
3. Cache API (Service Worker): 오프라인 콘텐츠 캐싱을 위한 고급 기술

---