브라우저 저장소 API: localStorage vs sessionStorage vs Cookie 완벽 가이드

이미지 출처 - https://stackoverflow.com/questions/19867599/what-is-the-difference-between-localstorage-sessionstorage-session-and-cookies

웹 애플리케이션에서 클라이언트 측 데이터 저장은 필수적인 기능입니다. 이 글에서는 브라우저에서 제공하는 세 가지 주요 저장 방식인 localStorage, sessionStorage, Cookie에 대해 자세히 알아보겠습니다.

---

브라우저 저장소 API란?

브라우저 저장소 API는 웹 애플리케이션이 클라이언트 측에 데이터를 저장할 수 있게 해주는 웹 스토리지 솔루션입니다. 주요 특징은 다음과 같습니다:

• 키-값 쌍 형태로 데이터 저장
• 문자열 데이터만 저장 가능
• 동일 출처 정책(Same-Origin Policy) 적용
• 비동기적으로 동작

---

Cookie란?

쿠키는 웹사이트가 사용자의 브라우저에 저장하는 작은 텍스트 파일입니다. 주로 서버와 클라이언트 간의 상태를 유지하는 데 사용됩니다.

주요 특징

• 서버와 클라이언트 간 데이터 교환 가능
• 만료 기간 설정 가능
• 도메인 및 경로 제한 가능
• HTTP 요청마다 자동 전송

쿠키 사용 예시

// 쿠키 설정
document.cookie = "username=홍길동; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

// 쿠키 읽기
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

// 쿠키 삭제
function deleteCookie(name) {
  document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';
}

쿠키의 보안 옵션

// 보안 쿠키 설정
document.cookie = "sessionId=abc123; Secure; HttpOnly; SameSite=Strict";

---

세 가지 저장 방식 비교

1. 저장 용량

localStorage & sessionStorage

브라우저	용량 제한	비고
Chrome	10MB	도메인당
Firefox	10MB	도메인당
Safari	5MB	도메인당
Edge	10MB	도메인당
Opera	10MB	도메인당
IE	10MB	도메인당

Cookie

브라우저	용량 제한	비고
Chrome	4KB	쿠키당
Firefox	4KB	쿠키당
Safari	4KB	쿠키당
Edge	4KB	쿠키당
Opera	4KB	쿠키당
IE	4KB	쿠키당

참고사항

• localStorage와 sessionStorage는 도메인당 제한이 적용됩니다.
• 쿠키는 개별 쿠키당 4KB로 제한되며, 도메인당 총 쿠키 수에도 제한이 있습니다.
• 모바일 브라우저의 경우 저장 용량이 더 제한적일 수 있습니다.
• 저장 용량 초과 시 QuotaExceededError 예외가 발생합니다.

2. 데이터 지속성

저장소	지속성
localStorage	영구 보관
sessionStorage	세션 종료 시 삭제
Cookie	만료 기간 설정 가능

3. 데이터 접근성

저장소	접근성
localStorage	클라이언트 측 JavaScript
sessionStorage	클라이언트 측 JavaScript
Cookie	클라이언트/서버 모두 접근 가능

4. 자동 전송

저장소	HTTP 요청 시 전송
localStorage	❌
sessionStorage	❌
Cookie	✅

---

각 저장소의 적절한 사용 사례

Cookie 적합 사례

• 인증 토큰 저장 (HttpOnly 옵션 사용)
• 서버 세션 관리
• 사용자 선호도 설정
• 크로스 도메인 요청 시 상태 유지

localStorage 적합 사례

• 사용자 테마 설정
• 장바구니 데이터
• 언어 설정
• 사용자 선호도 설정

sessionStorage 적합 사례

• 임시 폼 데이터
• 페이지 상태 관리
• 탭별 독립적인 데이터
• 일회성 데이터

---

보안 고려사항

Cookie 보안

1. HttpOnly 옵션

   • JavaScript에서 쿠키 접근 방지
   • XSS 공격으로부터 보호

2. Secure 옵션

   • HTTPS 연결에서만 전송
   • 중간자 공격 방지

3. SameSite 옵션

   • CSRF 공격 방지
   • 크로스 사이트 요청 제한

localStorage/sessionStorage 보안

1. 민감한 데이터 저장 금지

   • 인증 정보는 HttpOnly 쿠키 사용
   • 개인정보는 서버에만 저장

2. 데이터 암호화

   // 데이터 저장 시 암호화
   const encryptData = (data) => {
     return btoa(JSON.stringify(data));
   };
   
   // 데이터 조회 시 복호화
   const decryptData = (encryptedData) => {
     return JSON.parse(atob(encryptedData));
   };

3. XSS 공격 방지

   • 사용자 입력 데이터 검증
   • Content Security Policy(CSP) 설정
   • 적절한 인코딩 적용

---

결론

각 저장소는 고유한 특징과 사용 사례가 있습니다:

1. Cookie 선택 시기

   • 서버와의 통신이 필요한 데이터
   • 인증 정보 저장 (HttpOnly 옵션 사용)
   • 크로스 도메인 요청 시 상태 유지

2. localStorage 선택 시기

   • 장기적으로 유지해야 하는 데이터
   • 여러 탭에서 공유해야 하는 데이터
   • 사용자 설정과 같은 비민감 데이터

3. sessionStorage 선택 시기

   • 일시적인 데이터 저장
   • 탭별로 독립적인 데이터 관리
   • 세션 기반의 임시 데이터

보안을 고려하여 각 저장소의 특성을 잘 이해하고, 적절한 용도에 맞게 사용하는 것이 중요합니다.

---

참고 자료

• MDN Web Storage API
• MDN HTTP Cookies
• OWASP Web Storage Security
• Web Storage Best Practices