브라우저 저장소 총정리 (Cookie vs LocalStorage vs SessionStorage)

"데이터를 어디에 저장해야 할까요?"
브라우저에서 제공하는 저장소는 용도에 따라 성격이 완전히 다릅니다. 상황에 맞는 적절한 저장소를 선택하는 기준을 세워봅시다.

1. 세 가지 저장소 한눈에 비교

특징	Cookie	LocalStorage	SessionStorage
서버 전송	매 요청마다 포함	전송 안 함	전송 안 함
유효 기간	설정 시까지	영구적	탭 닫으면 삭제
저장 용량	4KB (매우 작음)	5MB 이상	5MB 이상

2. 언제 무엇을 쓸까?

• Cookie: 서버와 통신이 필요한 인증 정보(로그인 토큰 등)
• LocalStorage: 자동 로그인 여부, 다크모드 설정 등 사용자 설정을 유지할 때
• SessionStorage: 일회성 입력 폼 데이터, 비회원 장바구니 등 임시 정보

💡 실무 노트

보안이 중요한 데이터는 LocalStorage에 저장하는 걸 지양해야 합니다. 자바스크립트로 쉽게 접근할 수 있어 XSS 공격에 취약하거든요.

팁: 민감한 인증 정보는 쿠키에 저장하되, HttpOnly와 Secure 옵션을 반드시 활성화하세요. 그래야 스크립트를 통한 탈취를 막을 수 있습니다.