🍪 Cookie / 🗄️ localStorage / 🧳 sessionStorage 정리

웹에서 데이터를 저장하는 대표적인 방법은 Cookie, localStorage, sessionStorage 세 가지가 있다.

각각 저장 위치, 전송 방식, 보안성, 사용 목적이 다르다.

1️⃣ Cookie (쿠키)

✅ 개념

• 브라우저에 저장되는 작은 텍스트 데이터
• 모든 HTTP 요청마다 서버로 자동 전송

📦 특징

🔐 보안 옵션 (중요)

Set-Cookie: token=abc;
HttpOnly;
Secure;
SameSite=Strict;

• HttpOnly → JS 접근 불가 (XSS 방어)
• Secure → HTTPS에서만 전송
• SameSite → CSRF 방어

📌 언제 쓰나?

• 로그인 인증 정보 (JWT, 세션 ID)
• 서버가 반드시 알아야 하는 상태

👉 Next.js / SSR / 인증 토큰에 최적

2️⃣ localStorage

✅ 개념

• 브라우저에 영구적으로 저장되는 데이터
• 서버로 자동 전송 ❌

📦 특징

localStorage.setItem("theme","dark");
localStorage.getItem("theme");

⚠️ 주의사항

• JS로 접근 가능 → XSS 공격 시 위험
• 민감한 정보 저장 ❌

📌 언제 쓰나?

• 다크모드 설정
• 언어 설정
• 비로그인 사용자 UI 상태

3️⃣ sessionStorage

✅ 개념

• 탭(세션) 단위로 유지되는 저장소
• 탭을 닫으면 자동 삭제

📦 특징

sessionStorage.setItem("step","2");

📌 언제 쓰나?

• 멀티스텝 폼
• 결제 플로우 중간 상태
• 일회성 임시 데이터

🔍 한눈에 비교