The available Storage APIs in a modern Browser

Cookies

Cookies store small pieces of key-value data that are mainly used for session management, personalization, and tracking. Cookies can have several security settings like a time-to-live or the domain attribute to share the cookies between several subdomains.

LocalStorage

LocalStorage is only suitable for storing small amounts of data that need to persist across sessions and it is limited by a 5MB storage cap. Storing complex data is only possible by transforming it into a string for example with JSON.stringify(). The API is not asynchronous which means if fully blocks your JavaScript process while doing stuff. Therefore running heavy operations on it might block your UI from rendering.

IndexedDB

IndexedDB is a low-level API for storing large amounts of structured JSON data. While the API is a bit hard to use, IndexedDB can utilize indexes and asynchronous operations. It lacks support for complex queries and only allows to iterate over the indexes which makes it more like a base layer for other libraries then a fully fledged database.

Storage Size Limits

TechnologyLimits
Cookie4 KB
LocalStorage4 MB to 10 MB per origin
IndexedDBdepends on the browser implementation
OPFSdepends on the available disc space

Performance Comparison

Initialization Time
TechnologyTime in Milliseconds
IndexedDB46
OPFS Main Thread23
OPFS WebWorker26.8
WASM SQLite (memory)504
WASM SQLite (IndexedDB)535
Latency of small Writes
TechnologyTime in Milliseconds
Cookies0.058
LocalStorage0.017
IndexedDB0.17
OPFS Main Thread1.46
OPFS WebWorker1.54
WASM SQLite (memory)0.17
WASM SQLite (IndexedDB)3.17
Latency of small Reads
TechnologyTime in Milliseconds
Cookies0.132
LocalStorage0.0052
IndexedDB0.1
OPFS Main Thread1.28
OPFS WebWorker1.41
WASM SQLite (memory)0.45
WASM SQLite (IndexedDB)2.93