Browser Storage

Cookies, localStorage, sessionStorage, IndexedDB and Cache Storage: lifetime, synchronicity, capacity and exposure. Four different answers to "where does this live".

Choosing Browser Storage
▶ lab

Cookies, localStorage, sessionStorage, IndexedDB and Cache Storage compared on the six axes that actually decide: lifetime, scope, capacity, synchronicity, automatic transmission and exposure.

Q · Where should this piece of data live in the browser, and what am I signing up for when I put it there?
Cookies
▶ lab

The only browser store the network sends for you. That single property explains the convenience, the size limits, the scoping attributes and the class of attack built on top of it.

Q · What makes a cookie different from every other place I could put this, and what does it cost on every request?
localStorage and sessionStorage
▶ lab

A synchronous, string-only, origin-scoped map. The convenience is real, and so is the fact that every read and write blocks the thread that owns rendering.

Q · What am I actually doing to the main thread when I call `localStorage.getItem`, and why is `sessionStorage` not shared with the tab next to it?
IndexedDB
▶ lab

Asynchronous, structured, transactional and versioned — a real database in the browser, with a schema you own and a migration path that is where real applications break.

Q · When does client-side data need a transactional, versioned store, and what does owning a schema in the browser actually commit me to?
Cache Storage
▶ lab

A script-controlled store of Request/Response pairs. A different layer from the browser's HTTP cache, with different rules, and the reason a service worker can answer a request with no network at all.

Q · How is Cache Storage different from the HTTP cache the browser already has, and what do I gain by taking that decision away from the browser?
Storage Security and Durability
▶ lab

Two properties decide everything here: anything script can read, every script on the origin can read — and nothing in the browser is durable storage.

Q · Who can read what I put in browser storage, and what happens when the browser decides it needs the space back?