| 항목 |
쿠키 (Cookie) |
세션 (Session) |
로컬스토리지 (LocalStorage) |
| 저장 위치 |
클라이언트(브라우저) |
서버 |
클라이언트(브라우저) |
| 만료 시점 |
수동 설정 (기본: 세션 종료 시) |
브라우저 종료 or 시간 지정 |
수동 삭제 전까지 유지 |
| 용량 제한 |
약 4KB |
서버가 결정 |
5~10MB |
| 자동 전송 |
✅ 요청마다 서버에 자동 전송 |
❌ (쿠키 통해 식별) |
❌ 자동 전송 안 함 |
| 보안 |
취약할 수 있음 (노출 가능) |
상대적으로 안전 |
보안 취약 (XSS에 노출) |
| 접근 방법 |
JS (document.cookie) |
서버 로직 |
JS (localStorage.getItem()) |
| 용도 |
인증 정보, 트래킹 |
로그인 상태 유지 |
비회원 데이터 저장 등 |
✅ 1. 쿠키 (Cookie)
📌 뭐야?
- 브라우저가 서버와 주고받는 작은 데이터 저장소.
- 보통은 로그인세션, 인증토큰, 사용자 설정 등을 저장하는데 이용
- 서버가
Set-Cookie 헤더로 설정하면, 이후 모든 요청마다 자동으로 Cookie 헤더에 담아서 서버에 전송됨
Set-Cookie: token=abc123; Max-Age=3600; HttpOnly; Secure
📌 특징
- 자동 전송됨 → 로그인 유지, 세션 식별에 유용
- 매 요청마다 서버에 함께 전송됨 (트래픽 증가 가능)
- JS로 접근 가능 (
document.cookie) → 보안 이슈 (XSS)
- 보안 강화 옵션:
HttpOnly, Secure, SameSite 등
💡 사용 예
✅ 2. 세션 (Session)
📌 뭐야?