3. Browser Storage

HTML5의 공식적인 브라우저 저장소들이다. 모든 요청에 서버측과 공유되는 쿠키와는 달리 브라우저 저장소의 값들은 오직 클라이언트에서 사용된다. 자바스크립트에서는 window 객체를 통해 스토리지에 접근할 수 있으며 키과 값으로 구성된 데이터 셋을 약 5MB까지 저장 가능하다.

로컬 스토리지, 세션 스토리지는 저장값의 유효 범위와 지속성에서 차이점이 있다.

  • 로컬 스토리지, 인위적으로 데이터의 삭제를 가하지 않는 한 제거되지 않기 때문에 지속성이 비교적 길며, 세션에 제한되지 않는다는 점에서 유효 범위가 넓다. 지속적으로 유지되어야 하는 상태를 저장하는 데 사용된다. (ex, 15일 간 팝업 보지 않기)

  • 세션 스토리지, 세션이 종료가 되면 데이터가 제거된다. 즉 지속성이 비교적 짧고, 유효 범위는 본 세션에서만 유효하다.

  • indexedDB, 사용자의 브라우저에서 데이터를 영구적으로 저장할 수 있는 저장소이다. 네트워크 상태와 독립적으로 쿼리 기능을 통해 데이터에 접근할 수 있다. DB와 동일하다는 측면에서 스토리지의 용량 제한이 없으며 (디스크에 값이 저장됨), 문자열을 포함한 모든 값을 저장할 수 있어 큰 규모의 데이터를 저장하는 데 적합하다.

LocalStorage
SessionStorage
IndexedDB

Last updated