Local Storage / Session Storage / Cookies / IndexedDB

 

Local Storage

• 웹 애플리케이션이 데이터를 클라이언트 측에 영구적으로 저장할 수 있도록 합니다. 데이터는 브라우저가 닫히거나 컴퓨터를 재시작해도 삭제되지 않습니다.
• 도메인별로 약 5MB에서 10MB 정도의 데이터를 저장할 수 있습니다.
• 동일 출처 정책에 따라, 같은 도메인에서만 접근할 수 있습니다.

 

Session Storage

• 웹 페이지가 열린 동안 데이터를 저장하는 데 사용됩니다. 세션이 끝나면, 즉 브라우저 탭을 닫으면 데이터는 삭제됩니다.
• 로컬 스토리지와 비슷하게 각 도메인별로 5MB에서 10MB 정도의 데이터를 저장할 수 있습니다.
• 세션이 끝날 때까지 데이터가 유지됩니다. 즉, 브라우저 탭이 닫히면 데이터가 삭제됩니다.
• 브라우저 탭마다 독립적인 세션 스토리지를 갖습니다. 페이지 새로고침 후에도 데이터가 유지됩니다.

 

Cookies

• 주로 사용자 인증 정보나 추적 데이터를 저장하는 데 사용됩니다.
• 4KB 이하의 작은 데이터만 저장
• 쿠키는 만료 날짜를 설정할 수 있으며, 만료 날짜가 지나면 자동으로 삭제됩니다. 
• 서버와 클라이언트 간에 매번 HTTP 요청과 함께 전송되기 때문에, 많은 데이터를 저장하는 데 비효율적일 수 있습니다.
• 동일 출처 정책(same-origin policy)에 따라, 도메인 간에 공유할 수 없습니다.

 

IndexedDB

• 구조화된 데이터를 클라이언트 측에 저장할 수 있는 API
• 로컬 스토리지와 세션 스토리지보다 훨씬 큰 용량을 지원하므로, 대용량 데이터와 객체지향적 데이터를 저장하는 데 적합합니다.
• 비동기적으로 작동하여 데이터베이스에 CRUD(Create, Read, Update, Delete) 작업을 수행할 수 있습니다.

 

Service workers와 Cache API

• 오프라인 경험을 제공하기 위한 기술으로 Service worker 는 백그라운드에서 웹 어플리케이션을 실행하고, Cache API 를 통해 요청된 리소스를 오프라인에서 제공할 수 있도록 저장할 수 있습니다.

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
    console.log('Service Worker registered with scope:', registration.scope);
  }).catch(function(error) {
    console.log('Service Worker registration failed:', error);
  });
}

 

정리

	Local storage	Session storage	Cookies	IndexedDB
데이터 크기	5 ~ 10MB	5 ~ 10MB	4KB	수 백 MB 이상 (브라우저에 따라 다름)
만료 시점	직접 삭제 전까지 지속	브라우저 탭 / 세션이 종료되면 삭제	설정된 만료시간까지	직접 삭제 또는 브라우저가 캐시 정리 시 삭제
전송 여부	X	X	매 요청마다 서버로 전송됨	X
브라우저 지원 범위	대부분의 브라우저에서 지원	대부분의 브라우저에서 지원	대부분의 브라우저에서 지원	IE10 이상 최신 브라우저에서 지원
접근 가능 위치	같은 출처 (origin) 내 모든 탭 / 윈도우에서 접근 가능	같은 탭 / 윈도우에서만 접근 가능	같은 출처 (origin) + 설정된 경로 내에서 접근 가능	같은 출처 (origin) 내에서 접근 가능
저장방식	key-value	key-value	key-value	객체 저장 (json 형식)
보안	XSS 취약, https 권장	XSS 취약, https 권장	XSS 및 CSRF 모두 취약, 보안 설정 가능 (Secure,HttpOnly)	XSS 방지 필요
사용 용도	장기 설정 (테마, 로그인 유지 등)	일회성 데이터 (폼 임시 데이터 등)	세션 유지, 인증 정보	복잡한 데이터 (오프라인 앱)