Cookie vs Web Storage

좋아! 🔍 웹 개발에서 자주 쓰이는 Web Storage와 Cookie는
모두 브라우저에 데이터를 저장하는 기술이지만,
용도와 동작 방식이 완전히 달라!

---

🍪 Cookie vs Web Storage 차이 정리

항목	🍪 쿠키 (Cookie)	💾 웹 스토리지 (Web Storage)
📦 저장 위치	브라우저 (작은 크기)	브라우저 (더 많은 용량)
🔁 서버 전송	✅ 매 HTTP 요청마다 자동 전송	❌ 전송 안 됨 (클라이언트 전용)
📐 저장 용량	약 4KB 제한	5~10MB 이상
🕒 만료시간 설정	✅ 가능 (설정 안 하면 세션 쿠키)	localStorage: 무기한 sessionStorage: 탭 종료 시 삭제
🔐 보안성	상대적으로 낮음 (전송됨)	상대적으로 높음 (전송 안 됨)
📋 사용 용도	로그인 상태 유지, 추적, 광고, 세션 유지	프론트에서 사용자 설정, 폼 자동완성 등

---

🍪 Cookie 자세히 보기

• 브라우저 → 서버로 자동으로 전송
• 로그인 인증 세션, 장바구니 저장 등에 많이 사용
• 보통 서버에서 응답 시 Set-Cookie로 설정함

Set-Cookie: userId=1234; Expires=Wed, 17 Apr 2025 12:00:00 GMT; Path=/;

• 자바스크립트에서 접근할 수도 있음 (단, HttpOnly 옵션이 없을 때)

document.cookie = "theme=dark";
console.log(document.cookie);

---

💾 Web Storage (localStorage / sessionStorage)

1. localStorage

• 브라우저에 영구 저장
• 브라우저/탭을 꺼도 데이터 남아있음
• 로그인 토큰, 사용자 설정값 저장 등에 사용

localStorage.setItem("nickname", "moongi");
localStorage.getItem("nickname"); // "moongi"

---

2. sessionStorage

• 브라우저 탭을 닫으면 사라짐
• 탭 단위로 유지됨 (새 창은 새 저장소)
• 일시적인 폼 데이터, 페이지 이동 간 상태 유지 등에 사용

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

---

📌 쿠키 vs localStorage vs sessionStorage 요약표

항목	Cookie	localStorage	sessionStorage
📡 서버 자동 전송	✅ Yes	❌ No	❌ No
🕐 유효 기간	설정 가능	영구 저장	탭 종료 시 삭제
📦 저장 용량	~4KB	~5MB	~5MB
🔐 보안	민감정보 저장 비추천	보안 관리 필요	보안 관리 필요
✨ 사용 예시	로그인 세션, 인증 상태	토큰, 테마 설정	폼 단계 저장, 검색 필터 유지

---

✅ 언제 뭘 쓰면 될까?

상황	추천 저장소
로그인 세션 관리 (서버 인증 기반)	✅ Cookie (서버 인증용)
JWT 토큰 저장 (프론트 인증 기반)	✅ localStorage (또는 HttpOnly 쿠키)
테마 설정, 사용자 선호값	✅ localStorage
한 탭 내에서만 필요한 데이터	✅ sessionStorage

---

필요하다면

• React에서 localStorage로 토큰 저장하기
• 쿠키로 로그인 세션 유지하는 법
• JWT + localStorage vs JWT + Cookie 보안 비교

이런 것도 다 알려줄게!
어떤 방향으로 쓰고 싶은 거야? 로그인, 상태 유지, 프론트 설정? 😎