Lesson 33 of 55 · HTML
IndexedDB – Browser‑Side Structured Data
Duration: 11 min
IndexedDB Overview
IndexedDB is a low‑level API for storing large amounts of structured data (records, indexes). It works asynchronously and supports transactions.
// Open (or create) a database
const request = indexedDB.open('myDB', 1);
request.onupgradeneeded = e => {
const db = e.target.result;
const store = db.createObjectStore('notes', { keyPath: 'id', autoIncrement: true });
store.createIndex('by_title', 'title', { unique: false });
};
request.onsuccess = e => {
const db = e.target.result;
const tx = db.transaction('notes', 'readwrite');
const store = tx.objectStore('notes');
store.add({ title: 'First note', body: 'Hello IndexedDB' });
tx.oncomplete = () => console.log('Note added');
};
Key concepts
- Database version – Increment to trigger
onupgradeneeded. - Object store – Like a table; each record is a JavaScript object.
- Indexes – Enable fast queries on a property.
- Transactions – Group operations; either all succeed or all fail.
- Cursors – Iterate over large data sets without loading everything into memory.
Helper libraries
- idb – Promise‑based wrapper that simplifies the verbose IndexedDB API.
- localForage – Abstracts IndexedDB, WebSQL, and localStorage behind a simple API.
Practical use‑cases
- Offline‑first web apps (e.g., note‑taking, todo lists).
- Caching API responses for progressive web apps.
- Storing large binary blobs (images, audio) locally.
Quick checklist for IndexedDB
- Database opened with a version number? ✅
- Object stores and indexes defined in
onupgradeneeded? ✅ - All read/write operations wrapped in transactions? ✅
- Errors handled (
request.onerror)? ✅ - Consider using
idborlocalForagefor simpler code? ✅
Tip: When storing large blobs, consider using the Blob type and streaming APIs to keep memory usage low.