제대로 알고 사용하고 계신가요?
Cookies vs LocalStorage vs SessionStorage 완벽 비교
웹 서비스를 개발하거나
운영할 때 브라우저 데이터 저장 방식을 올바르게 선택하는 것은
성능, 보안, 사용자 경험(UX)에 직접적인 영향을 미칩니다.
많은 개발자가 세 가지 저장소를 혼용하지만, 용도와 동작 방식은 완전히 다릅니다.
인증은 Cookie, 장기 설정은 LocalStorage,
임시 데이터는 SessionStorage가 가장 적합한 선택입니다.
Cookies (쿠키)
서버와 함께 사용하는 인증용 저장소
쿠키는 브라우저와 서버가 함께 사용하는 작은 데이터입니다.
주요 특징
* 모든 HTTP 요청 시 서버로 자동 전송
* 약 4KB 저장 가능
* 만료 시간을 설정할 수 있음
* 서버에서도 읽고 사용할 수 있음
* 로그인 및 세션 관리에 최적
대표 사용 사례
* 로그인 세션 유지
* JWT/Access Token 저장 (보안 설정 필수)
* “자동 로그인(Remember Me)”
* 사용자 인증
* 방문 기록 및 사용자 추적
주의사항
* 요청마다 서버로 전송되므로 네트워크 트래픽 증가
* XSS, CSRF 공격에 대비하여 HttpOnly, Secure, SameSite 옵션을 반드시 적용해야 합니다.
LocalStorage (로컬 스토리지)
브라우저에 영구 저장되는 사용자 데이터
LocalStorage는 브라우저 내부에 데이터를 저장하며 서버로 전송되지 않습니다.
주요 특징
* 약 5~10MB 저장 가능
* 삭제 전까지 계속 유지
* 서버에 자동 전송되지 않음
* 동일한 도메인의 모든 탭에서 공유
* 읽기·쓰기 속도가 빠름
대표 사용 사례
* 다크 모드 설정
* 언어 설정
* 장바구니 정보
* 사용자 환경설정
* 오프라인 캐시
주의사항
* 민감한 개인정보나 인증 토큰 저장은 권장되지 않습니다.
* JavaScript에서 접근 가능하므로 XSS 공격에 노출될 수 있습니다.
SessionStorage (세션 스토리지)
현재 탭에서만 유지되는 임시 저장소
SessionStorage는 현재 브라우저 탭에서만 사용할 수 있는 저장소입니다.
주요 특징
* 약 5~10MB 저장 가능
* 탭을 닫으면 자동 삭제
* 서버에 전송되지 않음
* 다른 탭과 데이터 공유 불가
* 일시적인 데이터 관리에 적합
대표 사용 사례
* 회원가입 다단계 입력 폼
* 결제 진행 상태
* OTP 인증 절차
* 검색 필터 조건
* 임시 사용자 입력값
주의사항
* 브라우저 탭이 종료되면 모든 데이터가 삭제됩니다.
* 장기 보관이 필요한 데이터에는 적합하지 않습니다.
한눈에 비교
구분 Cookies
LocalStorage SessionStorage
저장 용량 약 4KB 약 5~10MB 약 5~10MB
서버 자동 전송 예
아니오 아니오
데이터 유지 만료일까지 삭제 전까지 탭 종료 시 삭제
탭 간 공유 가능
가능 불가
주요 용도 인증·세션 환경설정·장기 저장 임시 데이터
어떤 상황에서 사용할까?
Cookies
* 로그인 인증
* 세션 관리
* 보안 토큰
* 사용자 인증 정보
LocalStorage
* 다크 모드
* 언어 설정
* 장바구니
* 사용자 환경설정
* 오프라인 데이터
SessionStorage
* 다단계 입력 폼
* 임시 검색 조건
* 결제 진행 상태
* OTP 인증 과정
* 현재 탭의 작업 상태
보안 관점에서 꼭 기억하세요
인증 정보 → Cookie (HttpOnly + Secure + SameSite 적용 권장)
사용자 설정 → LocalStorage
임시 작업 데이터 → SessionStorage
비밀번호, 주민등록번호, 금융정보 등 민감한 개인정보는 브라우저 저장소에 저장하지 않는 것이 원칙입니다.
핵심 메시지
브라우저 저장소는 모두 데이터를 저장하지만 목적은 서로 다릅니다.
* Cookies는 서버와 함께 사용하는 인증 및 세션 관리에 적합합니다.
* LocalStorage는 사용자 설정과 같은 장기 데이터 저장에 적합합니다.
* SessionStorage는 현재 탭에서만 필요한 임시 데이터 관리에 적합합니다.
적절한 저장소를 선택하면 보안은 강화되고, 성능은 향상되며, 사용자 경험도 더욱 좋아집니다.
좋은 웹 애플리케이션은 데이터를 많이 저장하는 것이 아니라, 데이터를 올바른 위치에 저장하는 것에서 시작됩니다.
— 이춘곤(Mark) · ISC.studio · ISC출판 도서 안내
이 글은 저자의 Facebook에 처음 게시한 글입니다. Facebook 원문 보기
💬 댓글 (0)