웹 개발을 하다 보면 클라이언트에 데이터를 저장해야 할 때가 정말 많습니다.
이럴 때 자주 사용하는 기술이 바로 로컬 스토리지(Local Storage), 세션 스토리지(Session Storage), 그리고 쿠키(Cookie)입니다.
하지만 이 3가지 개념을 정확하게 구분하고 목적에 맞게 사용하는 사람은 의외로 많지 않습니다.
이 글에서는 단순한 개념 정리를 넘어서, 실제 프로젝트에서 언제 무엇을 써야 할지까지 깊이 있게 다뤄보겠습니다.
웹에서 데이터를 저장해야 하는 이유
브라우저에서 데이터를 저장하는 이유는 아주 다양합니다.
- 사용자의 로그인 상태 유지
- 다크 모드, 언어 설정 등의 개인화
- 장바구니, 최근 본 상품 같은 쇼핑몰 데이터
- 서버와의 반복 요청을 줄이기 위한 캐싱
이런 데이터를 클라이언트에 저장하려면, 세션스토리지, 로컬스토리지, 쿠키 중 하나를 사용해야 합니다.
웹 스토리지란? (Web Storage API)
Web Storage API는 브라우저에서 데이터를 key-value 형태로 저장할 수 있는 기능을 제공합니다.
이 API는 두 가지 저장소를 제공합니다:
1. 로컬 스토리지 (Local Storage)
- 탭을 닫거나 브라우저를 종료해도 데이터가 유지됩니다.
- 사용자가 직접 삭제하지 않는 이상 반영구적으로 남아있음.
- 5MB ~ 10MB까지 저장 가능 (브라우저마다 차이 있음)
- 서버에 자동 전송되지 않음
localStorage.setItem("nickname", "소은");
localStorage.getItem("nickname"); // "소은"
localStorage.removeItem("nickname");주의할 점
- 민감한 정보 (예: access token)는 저장하면 안 됩니다!
- 로컬 스토리지는 XSS(스크립트 삽입 공격)에 취약합니다.
2. 세션 스토리지 (Session Storage)
- 하나의 브라우저 탭에만 데이터가 저장됨.
- 탭을 닫으면 데이터도 즉시 사라짐.
- 동일한 페이지라도 다른 탭에서는 공유되지 않음.
- 보통 짧은 시간 동안 필요한 데이터를 저장할 때 사용
sessionStorage.setItem("isModalOpen", "true");
sessionStorage.getItem("isModalOpen"); // "true"
sessionStorage.clear();어디에 쓰일까?
- 탭 전환 시 데이터를 공유하지 않아야 하는 경우
- 사용자 행동 기록을 임시로 저장할 때
쿠키(Cookie)란?
쿠키는 사실 웹 스토리지보다 훨씬 오래된 기술입니다.
HTTP 통신 초창기부터 사용자의 상태 유지를 위해 만들어졌고, 지금도 여전히 많이 사용됩니다.
쿠키의 특징
- 서버가 Set-Cookie 헤더로 쿠키를 설정하면, 브라우저는 자동으로 서버에 전송함.
- 서버와의 통신에서 중요한 상태 정보, 세션 ID 등을 유지하기 위해 사용
- 4KB 이하만 저장 가능 (작은 데이터에 적합)
- 유효기간 설정 가능 (max-age, expires)
document.cookie = "authToken=abc123; max-age=3600; path=/;";
console.log(document.cookie);보안 설정 예시
HttpOnly: 자바스크립트에서 접근 불가 (XSS 방지)Secure: HTTPS 연결에서만 전송SameSite=Strict: 타 도메인 요청에서 전송 금지 (CSRF 방지)
보안 측면에서 비교
| 항목 | 로컬 스토리지 | 세션 스토리지 | 쿠키 |
|---|---|---|---|
| XSS 공격 위험 | 높음 | 높음 | 낮음 (HttpOnly 설정 시) |
| CSRF 위험 | 없음 | 없음 | 있음 (SameSite 설정 필수) |
| 서버 자동 전송 여부 | 없음 | 없음 | 있음 |
| 민감 정보 저장 | 비추천 | 비추천 | 가능 (조건 설정 시) |
실제 프로젝트에서 어떻게 쓰일까?
쿠키는 인증에 적합
서버에서 로그인 정보를 저장할 때, 쿠키에
access token또는session id를 저장하는 경우가 많습니다.
- HttpOnly 설정으로 자바스크립트 접근 차단
- Secure로 HTTPS 환경에서만 전송
- SameSite 설정으로 CSRF 보호
로컬스토리지는 사용자 설정값 저장
예시) 다크모드 설정, 최근 본 페이지, 쇼핑몰 장바구니 등
- 장기 저장이 가능
- 브라우저 종료해도 유지
- 서버와 통신 없이 즉시 반영 가능
세션스토리지는 임시 저장에 적합
예시) 팝업창 상태 저장, 현재 진행 중인 설문 응답 등
- 탭 닫으면 초기화
- 잠깐 필요한 상태 저장용으로 이상적
종합적 비교
| 항목 | 로컬 스토리지 | 세션 스토리지 | 쿠키 |
|---|---|---|---|
| 저장 위치 | 클라이언트 | 클라이언트 | 클라이언트 + 서버 |
| 용량 제한 | 약 5~10MB | 약 5~10MB | 4KB 이하 |
| 만료 시점 | 직접 삭제 전까지 | 탭 종료 시 | 설정에 따라 달라짐 |
| 서버 전송 | X | X | O |
| 브라우저 탭 간 공유 | O | X | O |
| 접근 방식 | JavaScript | JavaScript | HTTP + JavaScript |
| 주 사용 용도 | 설정값, 캐싱 등 | UI 임시 상태 | 인증, 추적, 로그인 유지 |
간단한 팁
- 보안이 중요하면 쿠키 + HttpOnly
- 빠른 접근성과 저장성능이 중요하면 로컬스토리지
- 짧은 시간 동안만 필요한 데이터면 세션스토리지
그리고 무엇보다 중요한 건,
절대 민감한 정보를 로컬/세션 스토리지에 저장하지 않는 것!이 중요합니다!
결론
쿠키, 로컬스토리지, 세션스토리지는 모두 쓰임새가 다릅니다.
단순히 데이터를 저장한다고 해서 무조건 로컬스토리지를 쓰는 것이 아니라,
데이터의 특성과 보안 요구 수준에 따라 적절한 저장 방식을 선택하는 습관이 필요합니다.
이 글이 여러분의 웹 프로젝트에 도움이 되길 바랍니다!
