Browser storage: cookies, Web Storage and IndexedDB compared

What it is

Cookies are name-value pairs set by the server (Set-Cookie) or by script and sent back with every matching request. RFC 6265 asks user agents to support at least 4096 bytes per cookie, 50 cookies per domain and 3000 in total, and allows them to evict cookies beyond such limits. Web Storage (HTML standard) offers localStorage, which persists per origin, and sessionStorage, which is scoped to one top-level traversable (a tab or window) and ends with it; both are synchronous and store strings only. MDN's quota page states that Web Storage is limited to 10 MiB in total, 5 MiB of local and 5 MiB of session storage per origin, and that exceeding it throws QuotaExceededError. IndexedDB is asynchronous and transactional, stores structured values and blobs with indexes, and draws on the origin's general quota, which in Chromium-based browsers can reach 60% of the disk. Storage is best-effort by default and may be evicted under pressure; navigator.storage.persist() requests persistence, navigator.storage.estimate() reports usage and quota, and private browsing usually discards data when the session ends.

Why it matters

The wrong choice creates security or reliability problems: a session token in localStorage is readable by any injected script, large state in cookies inflates every request, a big synchronous localStorage write blocks the main thread, and an application that assumes best-effort data will always be there fails silently after eviction.

How to apply

• Data the server needs on each request (session identifier): a small cookie with HttpOnly, Secure and a path scope; nothing else goes in cookies.
• Small client-only preferences: localStorage, every access wrapped in try/catch because it can throw when full or blocked.
• Per-tab transient state (wizard progress, draft filters): sessionStorage.
• Records, files, offline caches: IndexedDB, behind a small wrapper so the rest of the code sees promises.
• Version the stored shape (settings:v2) and migrate or discard on mismatch.
• Before relying on storage for critical data, call persist() and treat a refusal as "may vanish".

Pitfalls

Storage is per origin: app.example.com and example.com do not share localStorage, while a cookie with Domain=example.com is sent to both, and cookies do not isolate by port. Browsers may further partition storage for a site embedded in third-party frames. JSON.stringify drops undefined and turns Date into strings; deserialise deliberately.