쿠키 vs 세션 스토리지 vs 로컬 스토리지: 브라우저 저장소 총정리

브라우저에 데이터를 저장해야 할 때가 있습니다. "로그인 유지", "다크 모드 설정", "오늘 하루 보지 않기" 등등. 개발자 도구의 Application 탭을 열어보면 저장소가 여러 갠데, 도대체 뭘 써야 할까요? 특징과 용도를 딱 정해드립니다.

1. 쿠키 (Cookie)

가장 역사가 깊습니다.

• 용도: 주로 서버와의 통신을 위해 씁니다 (세션 ID, 인증 토큰).
• 특징: 매번 서버로 요청을 보낼 때마다 헤더에 자동으로 실려갑니다. 그래서 데이터가 크면 네트워크 트래픽 낭비가 심합니다(4KB 제한).
• 만료: 만료 기한(Expires)을 설정할 수 있습니다.

2. 웹 스토리지 (Web Storage)

HTML5에서 추가되었습니다. 서버로 전송되지 않고 클라이언트에만 저장됩니다. 용량도 넉넉합니다(약 5MB).

2.1 로컬 스토리지 (Local Storage)

• 특징: 영구적입니다. 탭을 닫아도, 컴퓨터를 껐다 켜도 남아있습니다.
• 용도: 자동 로그인 여부, 테마 설정, 장바구니 데이터(비회원).
• localStorage.setItem('key', 'value')

2.2 세션 스토리지 (Session Storage)

• 특징: 휘발성입니다. 탭(세션)을 닫으면 바로 날아갑니다. 심지어 같은 사이트라도 탭이 다르면 스토리지도 다릅니다.
• 용도: 입력 폼 임시 저장, 일회성 로그인 정보, 뒤로 가기 복원용 데이터.

3. 보안 주의사항 (XSS)

웹 스토리지는 JS로 쉽게 접근할 수 있기 때문에, 민감한 정보(비밀번호, 액세스 토큰)를 절대 여기에 저장하면 안 됩니다. XSS 공격 한 방이면 토큰이 털립니다. 중요한 인증 토큰은 보안 옵션(HttpOnly, Secure)이 걸린 쿠키에 저장하는 것이 그나마 안전합니다.