한양과기고 에듀테크 수업도구 대시보드

📊 세 가지 저장소 한눈에 비교

	Cookie	localStorage	sessionStorage
용량	~4KB	~5~10MB	~5~10MB
만료 시점	지정 만료일 또는 세션 종료	직접 삭제 전까지 영구	탭(또는 창) 닫으면 소멸
서버 전송	모든 HTTP 요청에 자동 포함	전송 안 됨 (JS로만 접근)	전송 안 됨 (JS로만 접근)
탭 간 공유	같은 도메인이면 공유	같은 오리진 모든 탭 공유	탭(컨텍스트)별로 독립
주요 용도	세션 인증, 서버가 읽어야 하는 값	테마·설정 등 영구 저장	폼 임시 데이터, 탭 한정 상태

🍪 Cookie

키=값

현재 값

이 값은 지금 이 페이지를 새로고침해도, 서버로 보내는 모든 요청 헤더에 자동으로 실려갑니다.

💾 localStorage 영구 저장

키=값

현재 값 —

이 값은 탭을 닫고 브라우저를 완전히 껐다 켜도 그대로 남아 있습니다. 다른 탭에서 같은 사이트를 열어도 공유됩니다.

📑 sessionStorage 탭 한정

키=값

현재 값 —

새로고침해도 남지만, 이 탭을 닫으면 즉시 사라집니다. 같은 페이지를 새 탭으로 열면 비어 있습니다.

📋 동작 로그 실시간

// 위 버튼을 눌러보세요...

⚡ 요청마다 무엇이 서버로 가는가

브라우저

→ GET /page (Cookie 헤더 포함) →

↓

서버

request.cookies 로 읽음

localStorage / sessionStorage는 애초에 HTTP 프로토콜의 일부가 아니라 브라우저가 제공하는 JS 전용 API라서, 개발자가 직접 fetch 본문에 담아 보내지 않는 한 서버는 그 존재조차 알 수 없습니다.

📈 저장 용량 한계 비교

🧑‍💻 JS 코드 예시

// 쿠키: 문자열 하나로 직접 파싱해야 함 document.cookie = "theme=dark; max-age=3600; path=/"; const theme = document.cookie .split('; ') .find(row => row.startsWith('theme=')); // localStorage: 키-값 API, 영구 저장 localStorage.setItem('lang', 'ko'); const lang = localStorage.getItem('lang'); localStorage.removeItem('lang'); // sessionStorage: API는 동일, 생명주기만 다름 sessionStorage.setItem('draft', 'hello');

🛡️ 왜 로그인 세션은 보통 쿠키로 관리할까?

HttpOnly 플래그
쿠키에 HttpOnly를 붙이면 JS(document.cookie)로는 아예 읽을 수 없고, 브라우저가 요청 시에만 자동으로 첨부합니다. localStorage는 JS로 접근하는 것이 원래 목적이라 이런 보호가 불가능합니다.

XSS 위험 비교
공격 스크립트가 페이지에 삽입되면 localStorage의 토큰은 localStorage.getItem() 한 줄로 통째로 유출됩니다. HttpOnly 쿠키는 이 경로로 훔칠 수 없습니다.

그 대신 쿠키는 CSRF에 취약
자동 전송된다는 바로 그 특성 때문에 위조 요청에도 함께 실려 갑니다. 그래서 SameSite 속성이나 CSRF 토큰이 함께 필요합니다.