[Medium] 📄 cookie, sessionStorage, localStorage

비교

속성	cookie	sessionStorage	localStorage
생명주기	만료 시간(Expires) 또는 최대 보존 시간(Max-Age)을 설정하지 않으면, 기본적으로 페이지를 닫으면 삭제	페이지를 닫으면 삭제	명시적으로 삭제할 때까지 영구 보존
HTTP Request	예, Cookie header를 통해 서버에 전송 가능	아니오	아니오
총 용량	4KB	5MB	5MB
접근 범위	윈도우/탭 간 공유	동일 탭만	윈도우/탭 간 공유
보안성	JavaScript는 HttpOnly cookies에 접근 불가	없음	없음

용어 설명

Persistent cookies란 무엇인가?

영구 cookie는 사용자 브라우저에 데이터를 장기간 저장하는 방법입니다. 구체적으로는 위에서 언급한 만료 시간을 설정하여 구현합니다(Expires 또는 Max-Age).

개인 구현 경험

cookie

1. 보안 검증

일부 레거시 프로젝트는 보안 상태가 좋지 않아 계정 탈취 문제가 빈번하게 발생하여 운영 비용이 크게 증가했습니다. 먼저 Fingerprint 라이브러리(커뮤니티 버전 정확도 약 60%, 유료 버전 월 무료 할당량 2만 건)를 채택하여 로그인하는 사용자를 디바이스와 위치 정보 매개변수로 고유한 visitID로 식별했습니다. 그런 다음 cookie가 매번 HTTP 요청 시 전송되는 특성을 활용하여 백엔드에서 사용자의 현재 상황(디바이스 변경 또는 위치 이상 변동)을 확인하고, 이상이 감지되면 로그인 과정에서 OTP 인증(회사 요구에 따라 이메일 또는 SMS)을 강제로 트리거했습니다.

2. 프로모션 코드 URL

제품 웹사이트 운영 시 제휴 마케팅 전략으로 협력 파트너에게 전용 URL을 제공하여 유입과 홍보를 쉽게 했습니다. 유입을 통해 들어온 고객이 해당 프로모터의 실적에 속하도록 보장하기 위해 cookie의 expires 특성을 활용하여 구현했습니다. 사용자가 사이트에 유입된 시점부터 24시간 이내(제한 시간은 운영 측에서 결정 가능)에는 프로모션 코드가 유효하며, 사용자가 의도적으로 URL의 프로모션 코드 매개변수를 삭제해도 등록 시 cookie에서 해당 매개변수를 가져와 적용하고, 24시간 후에 자동으로 만료됩니다.

localStorage

1. 사용자 환경 설정 저장

• 사용자의 개인 환경 설정 저장에 자주 사용됩니다. 예: 다크 모드, i18n 언어 설정 등.
• 또는 로그인 token 저장.