[Frontend] localStorage VS sessionStorage VS cookies

목차 (OPEN)

• 💻 localStorage VS sessionStorage VS cookies 종합 비교
• 📦 저장소 개념
• 🧭 동작 및 수명
• 🔐 보안 및 용량
• 🎯 주로 사용되는 예시
• 📚 결론

 

 

 

 

 

💻 localStorage VS sessionStorage VS cookies 종합 비교

 

📦 저장소 개념

항목	localStorage	sessionStorage	cookies
정의	클라이언트에 영구적으로 데이터를 저장하는 Web Storage	브라우저 탭 세션 동안만 데이터를 저장하는 Web Storage	클라이언트에 데이터를 저장하고 서버로 자동 전송되는 작은 데이터
저장 위치	브라우저 (도메인별)	브라우저 탭 (도메인 + 탭 별)	브라우저 (도메인 + 경로 기준)
데이터 형태	문자열(String)만 저장 가능	문자열(String)만 저장 가능	문자열 기반의 key=value 쌍

 

---

🧭 동작 및 수명

항목	localStorage	sessoinStorage	cookies
수명	명시적으로 삭제하거나 브라우저 초기화 전까지 영구 저장	탭을 닫거나 브라우저를 종료할 때 자동 삭제	기본은 세션 동안 유지, 만료 시간 설정 가능 (Max-Age, Expires)
탭 간 공유	✅ 가능	❌ 불가능 (탭별로 분리됨)	✅ 가능 (도메인 기반)
자동 전송 여부	❌ 서버 전송되지 않음	❌ 서버 전송되지 않음	✅ 요청마다 자동으로 전송됨 (Cookie 헤더)

 

---

🔐 보안 및 용량

항목	localStorage	sessionStorage	cookies
JavaScript 접근	✅ 가능	✅ 가능	✅ 기본 가능 ❌ HttpOnly 설정 시 불가능
XSS 공격	❗ 매우 취약 (JS 접근 가능)	❗ 매우 취약 (JS 접근 가능)	✅ HttpOnly로 막을 수 있음
CSRF 공격	✅ 안전 (전송 안 됨)	✅ 안전 (전송 안 됨)	❗ SameSite 설정 필요
크기 제한	약 5MB	약 5MB	약 4KB
보안 권장 설정	사용 최소화 또는 메모리 사용	짧은 상태값만 보관	HttpOnly Secure SameSite=Strict

 

---

🎯 주로 사용되는 예시

항목	localStorage	sessionStorage	cookies
로그인 상태 유지	✅ Access Token 저장 시 사용됨 (주의 필요)	❌ 브라우저 종료 시 사라짐	✅ Refresh Token 저장 (보안 강화 가능)
사용자 설정 저장	✅ 테마, 언어 설정 등	✅ 비회원 입력값 임시 저장 등	❌ 비효율적 (자동 전송 부담 있음)
인증 및 세션 관리	❌ JS만 접근 가능해 위험	❌ 휘발성이 강함	✅ 서버 중심 인증에 적합

 

---

📚 결론

각 저장소는 용도와 보안 요구사항에 따라 사용 방식이 완전히 달라진다.

따라서 아래의 기준에 따라서 선택하는 것이 일반적이다.

 

• 🔒 보안 및 인증이 필요한 정보 (특히 Refresh Token)
  → cookies (HttpOnly, Secure, SameSite 설정 필수)
• ⚙ 사용자 환경 설정 / 캐시 / 비로그인 상태 데이터 유지
  → localStorage (보안 위험이 낮은 경우)
• ✏️ 짧은 시간 동안 임시 저장이 필요한 값 (ex. 폼 데이터, SPA 상태 유지)
  → sessionStorage