Cookie vs Local Storage vs Session Storage

Cookie

서버가 알아야 하는 정보 & 보안이 필요한 정보
쿠키는 클라이언트 저장소지만, 모든 HTTP 요청(Request)마다 헤더에 실려 서버로 전송됩니다. 따라서 불필요한 데이터를 많이 넣으면 트래픽 낭비가 심합니다. 대신 HttpOnly 설정을 통해 자바스크립트 접근을 막을 수 있어 보안상 유리합니다.

• 저장해야 할 것
  - 인증 토큰 (Refresh Token): 반드시 HttpOnly, Secure 옵션을 켜서 저장 (XSS 공격 방어)
  - 다시 보지 않기 (팝업 설정): 서버에서 팝업을 렌더링 할지 말지 결정할 때 유용
  - 비로그인 장바구니 ID: 사용자를 추적하기 위한 가벼운 식별자
• 저장하면 안 되는 것
  - 단순 UI 상태 값 (UI 테마 등 서버가 몰라도 되는 정보)
  - 덩치가 큰 데이터 (4KB 제한도 있고, 네트워크 비용 발생)

Local Storage

지워지면 안 되는 사용자 설정 & 반영구적 데이터

브라우저를 껐다 켜도 데이터가 유지됩니다. 서버로 전송되지 않으므로 네트워크 비용이 들지 않고, 용량도 넉넉(약 5MB)합니다. 하지만 XSS(스크립트 삽입) 공격에 취약하므로 민감 정보는 절대 금물입니다.

• 저장해야 할 것
  - 사용자 UI 설정: 다크 모드/라이트 모드 여부, 폰트 크기, 사이드바 펼침 여부. (사용자가 다음에 왔을 때도 그대로여야 하는 것들)
  - 자동 로그인 여부 플래그: (실제 토큰이 아니라, '아이디 저장' 체크박스 상태 같은 것)
  - 최근 검색어: 서버에 저장할 필요 없는 개인화된 캐시 데이터.
  - 장바구니 데이터 (비로그인): 브라우저를 닫아도 상품이 남아있어야 구매 전환율이 높습니다.

• 저장하면 안 되는 것
  - Access Token / 비밀번호: 자바스크립트로 쉽게 탈취 가능

Session Storage

휘발되어도 상관없는 임시 데이터 & 탭별 독립 데이터

로컬 스토리지와 비슷하지만, 탭을 닫으면 즉시 삭제됩니다. 또한 같은 사이트라도 탭마다 별개의 저장 공간을 가집니다.

• 저장해야 할 것

  • 입력 폼 임시 저장: 글 쓰다가 실수로 새로고침 했을 때 내용 복구용. (작업이 끝나면 지워져야 함)
  • 페이지 스크롤 위치: 상세 페이지 갔다가 뒤로 가기 했을 때 원래 위치 복구용.
  • 일회성 데이터: 비회원 주문 조회 후, 해당 탭에서만 유효한 인증 상태.
  • 필터링 옵션: 쇼핑몰에서 상품 목록 필터(가격순, 최신순)를 걸고 상세 페이지 갔다 왔을 때 유지용.

• 저장하면 안 되는 것
  - 다음에 방문했을 때도 기억해야 하는 모든 정보.

요약