IndexedDB
Indexed Database API
- Pronunciation
- IN-dekst dee-BEE
In short
IndexedDB is a database built into web browsers that stores large amounts of structured data and files on the user's device, with indexes and transactions.
What is IndexedDB?
IndexedDB gives a website a real database inside the browser. Instead of tables it has object stores: collections of JavaScript objects, each saved under a key, such as a note under its id. You can add indexes to look records up by other fields, such as a date, and group reads and writes into transactions, which either complete fully or not at all. Values can be almost anything JavaScript can copy, including nested objects, dates and files.
The API is asynchronous, so large reads and writes don't freeze the page: you make a request, and the result arrives later through events such as onsuccess. Each database has a version number, and when code opens it with a higher one, an onupgradeneeded event runs where you create or change object stores, much like a database migration. Like other browser storage, a database belongs to one origin, and browsers allow far more space than for local storage, often a sizable share of the free disk.
IndexedDB is the storage behind offline-capable web apps and progressive web apps: mail clients that work on a plane, editors that save drafts on the device, and apps that keep a copy of API data. The raw API is verbose, so many projects use a small wrapper such as idb, which adds promises, or Dexie.js.
IndexedDB is most often compared with local storage. Local storage is a simple, synchronous store of strings limited to about 5 MB, good for a theme or a flag; IndexedDB is asynchronous, stores structured data and files, supports indexes and transactions and holds much more. It is not a SQL database either: there are no tables or queries, only keys, indexes and cursors, which step through records one by one.
Key takeaways
- IndexedDB is a browser database for large amounts of structured data and files.
- Data lives in object stores and is looked up by key or by index.
- Its API is asynchronous, with transactions and versioned schema upgrades.
- Each database belongs to one origin and can hold far more than local storage.
- It powers offline web apps; wrappers like
idbmake the API easier to use.
Example
const request = indexedDB.open("notes-app", 1);
// Runs the first time, or whenever the version number goes up
request.onupgradeneeded = () => {
const store = request.result.createObjectStore("notes", { keyPath: "id" });
store.createIndex("byDate", "createdAt");
};
request.onsuccess = () => {
const db = request.result;
const tx = db.transaction("notes", "readwrite");
tx.objectStore("notes").put({ id: 1, text: "Buy milk", createdAt: Date.now() });
tx.oncomplete = () => console.log("Saved");
};Readers ask
What is the difference between IndexedDB and localStorage?
localStorage stores only strings, about 5 MB per origin, and its calls block the page while they run. IndexedDB stores objects and files, holds much more, supports indexes and transactions and works asynchronously.
How much data can IndexedDB store?
It depends on the browser and the free disk space. Modern browsers often give each origin hundreds of megabytes or more, and navigator.storage.estimate() reports how much is used and how much is available.
Is IndexedDB data permanent?
Not guaranteed. Browsers may clear it when the device runs low on space, and users can delete it. Calling navigator.storage.persist() asks the browser to keep the data until the user removes it.
See also
- Local StorageWeb Development, p. 33Local storage is a browser feature that lets a website save text as key-value pairs on the user's device, where it stays even after the browser is closed.
- Session StorageWeb Development, p. 49Session storage is a browser feature that saves text as key-value pairs for one tab only; the data survives reloads but is deleted when the tab is closed.
- Service WorkerWeb Development, p. 48A service worker is a script the browser runs in the background, apart from the page, to intercept network requests and enable offline use and push messages.
- PWAWeb Development, p. 42A PWA is a website built with modern web APIs so it can be installed on a device, work offline, and behave much like a native app from a single codebase.
- TransactionDatabases, p. 50A transaction is a group of database operations that succeed or fail as a single unit, so the data is never left in a half-finished, inconsistent state.
- Key-Value StoreDatabases, p. 27A key-value store is a NoSQL database that saves each piece of data under a unique key, so an application can read or write it by that key very quickly.
Sources
Spotted a mistake or something missing on this page?Suggest an edit