Browser Data Stroage 종류와 차이점

 

1. 쿠키 ( Cookies )

 

• 작은 텍스트 파일로 클라이언트 측에 저장됩니다.
• 용량 제한: 보통 4KB
• 만료 기간 설정 가능
• 서버와 클라이언트 간 요청 시 자동으로 전송됨
• 주로 세션 관리, 사용자 선호 설정 등에 사용

 

2. 로컬 스토리지 (Local Storage)

• HTML5에서 도입된 웹 스토리지 방식
• 용량 제한: 보통 5-10MB (브라우저에 따라 다름)
• 영구적으로 데이터 저장 (사용자가 직접 삭제하기 전까지)
• 동일 출처(Same Origin) 내에서만 접근 가능
      이 뜻은... https://example.com에서 저장한 로컬 스토리지 데이터는
  
  • https://example.com의 다른 페이지에서 접근 가능
  • http://example.com에서는 접근 불가 (프로토콜 다름)
  • https://sub.example.com에서도 접근 불가 (서브도메인 다름)
  • https://example.org에서도 접근 불가 (도메인 다름)
• 문자열 형태로 데이터 저장

 

 

 

3. 세션 스토리지 (Session Storage)

• 로컬 스토리지와 유사하지만 세션 기반
• 브라우저 탭/창을 닫으면 데이터가 삭제됨
• 용량 제한: 로컬 스토리지와 비슷
• 동일 출처 내에서만 접근 가능

 

 

4. IndexedDB

• 구조화된 데이터를 저장할 수 있는 로우-레벨 API
• 대용량 데이터 저장에 적합 (수백 MB 이상)
• 비동기적으로 작동하여 성능이 우수
• 복잡한 쿼리와 인덱싱 지원
  • "복잡한 쿼리 지원"이라는 표현은 SQL과 유사한 기능을 제공한다는 의미지 
     SQL 쿼리를 직접 지원하지 않는다
    

 

 

 

주요 차이점

• 용량: 쿠키 < 로컬/세션 스토리지 < IndexedDB
• 지속성: 세션 스토리지 < 쿠키 (만료 설정에 따라) < 로컬 스토리지/IndexedDB
• 복잡성: 쿠키/로컬/세션 스토리지 (간단) < IndexedDB (복잡)
• 서버 전송: 쿠키는 자동 전송, 나머지는 수동으로 전송해야 함
• 보안: 모두 동일 출처 정책을 따르지만, 쿠키는 추가 보안 옵션 제공 (예: HttpOnly, Secure 플래그)