Learn browser storage vocabulary: localStorage vs. sessionStorage vs. IndexedDB vs. Cache API, quota management, storage eviction, opaque responses, and CORS in service workers.
0 / 5 completed
1 / 5
The key difference between localStorage and sessionStorage is:
Both APIs are synchronous, same-origin, key-value string stores. localStorage survives browser restarts. sessionStorage is scoped to the lifetime of the tab — opening the same URL in a new tab creates a separate sessionStorage. Neither is suitable for large amounts of data or complex queries; use IndexedDB for those cases.
2 / 5
IndexedDB is preferred over localStorage for web applications that need to:
IndexedDB is a full transactional database in the browser: it supports object stores, indexes, cursors, and key ranges. Unlike localStorage, it is asynchronous (non-blocking), can store megabytes to gigabytes of data, and works in service workers. It is the backing store for offline-capable apps and tools like PouchDB.
3 / 5
An 'opaque response' in the context of the Cache API and service workers means:
When a service worker fetches a resource from a different origin without CORS (a no-cors request), the browser returns an opaque response: status is 0, headers are empty, body is unreadable. It can be cached and served back to the page, but the service worker cannot check if the request succeeded. Opaque responses count as a minimum of ~7 MB against the storage quota to prevent timing attacks.
4 / 5
The Cache API differs from HTTP caching (browser cache) in that:
The browser's HTTP cache is controlled by Cache-Control headers from the server. The Cache API is a separate, developer-controlled storage accessible to service workers and the window. A service worker can pre-cache app shell assets during install, serve them instantly, and update them on a schedule — giving precise control over offline behaviour.
5 / 5
Browser storage quota management means that:
The Storage API (navigator.storage.estimate()) lets apps query their quota and usage. By default, storage is 'best-effort' and can be evicted under pressure. Calling navigator.storage.persist() requests persistent storage — the browser (or user) may grant it, protecting the origin's data from automatic eviction. This is important for offline-first PWAs that cannot afford to lose cached data.