localStorage vs SessionStorage vs Cookies

localStorage vs sessionStorage vs Cookies

localStorage, sessionStorage, 그리고 Cookies는 모두 브라우저에서 데이터를 저장하는 데 사용되지만, 각각의 특성과 사용 사례가 다름

---

비교표: localStorage vs sessionStorage vs Cookies

특징	localStorage	sessionStorage	Cookies
저장 용량	약 5-10MB (브라우저마다 다름)	약 5-10MB (브라우저마다 다름)	약 4KB (도메인당 제한)
수명	명시적으로 삭제하지 않는 한 영구적으로 저장	브라우저 탭이나 창을 닫으면 삭제됨	설정된 만료 시간까지 유지 가능. 만료 시간이 없으면 브라우저 종료 시 삭제됨
데이터 전송	HTTP 요청과 함께 전송되지 않음	HTTP 요청과 함께 전송되지 않음	모든 HTTP 요청에 포함되어 서버로 전송됨
접근성	클라이언트 측에서만 접근 가능	클라이언트 측에서만 접근 가능	클라이언트와 서버 모두에서 접근 가능
보안	XSS(크로스 사이트 스크립팅)에 취약. 민감한 데이터 저장에 부적합	XSS에 취약. 민감한 데이터 저장에 부적합	HttpOnly, Secure 플래그를 설정하면 보안 강화 가능. 하지만 CSRF(크로스 사이트 요청 위조)에 취약
스코프	동일한 도메인 및 프로토콜 내에서만 접근 가능	동일한 도메인 및 프로토콜 내에서만 접근 가능	도메인 전체와 하위 도메인에서도 접근 가능
사용 사례	사용자 설정, 애플리케이션 상태, SPA(Single Page Application)의 데이터	일회성 데이터, 현재 세션 동안만 필요한 데이터	인증 토큰, 세션 관리, 크로스 도메인/서브도메인 데이터 공유

---

상황별 사용 사례

1. localStorage

• 특징: 영구적으로 데이터를 저장하며, 브라우저를 닫아도 데이터가 유지.
• 사용 사례:
  • 사용자 환경설정 저장 (예: 다크 모드, 언어 설정)
  • SPA(Single Page Application)에서 상태 관리
  • 페이지 간 데이터 공유 (동일 도메인 내)

2. sessionStorage

• 특징: 현재 브라우저 탭이나 창이 열려 있는 동안만 데이터를 유지.
• 사용 사례:
  • 일시적인 폼 데이터 저장
  • 탭 간 분리된 상태 관리
  • 페이지 이동 중 임시 데이터 저장

3. Cookies

• 특징: 서버와 클라이언트 간 데이터를 주고받을 수 있으며, 만료 시간 설정이 가능.
• 사용 사례:
  • 세션 관리 및 인증 토큰 저장
  • 크로스 도메인/서브도메인 데이터 공유
  • 자동 로그인 구현

---

보안 고려사항

localStorage와 sessionStorage

• XSS 공격에 취약하여 민감한 데이터를 저장하는 데 적합하지 않음.
• 데이터를 암호화하거나 민감한 정보는 서버 측으로 이동하는 것이 좋음.

Cookies

• HttpOnly 및 Secure 플래그를 사용하면 보안을 강화할 수 있음
• CSRF 공격 방지를 위해 SameSite 플래그를 설정하는 것이 권장됨.

---

결론 및 선택 기준

1. 민감한 데이터를 저장해야 한다면 Cookies를 사용하는 것이 가장 적합함
2. 사용자 환경설정이나 애플리케이션 상태처럼 클라이언트 측에서만 필요한 데이터를 저장하려면 localStorage가 적합함
3. 일회성 데이터나 세션 동안만 필요한 데이터를 저장하려면 sessionStorage를 선택