intermediate

IndexedDB

Store larger structured client data with object stores, indexes, transactions, version upgrades, and async access.

IndexedDB is the browser database for larger structured client-side data. It uses object stores, indexes, transactions, cursors, and versioned schema upgrades. It is asynchronous and powerful enough for offline queues or caches, but its API and upgrade lifecycle require careful error handling and migration planning.

					const request = indexedDB.open('app', 2);
request.onupgradeneeded = (event) => {
  const db = event.target.result;
  if (!db.objectStoreNames.contains('outbox')) {
    db.createObjectStore('outbox', { keyPath: 'id' });
  }
};
				

Only one tab can complete a version upgrade; others block until it finishes. Plan migrations idempotently and surface blocked states to users.

On interviews: when IndexedDB beats localStorage and why schema upgrades can block across open tabs.

Common pitfalls: treating it like a server database leads to overdesign. Ignoring blocked upgrades causes hard-to-debug stale schemas.

The trade-off is convenience versus control — pick the mechanism that matches your coupling and performance budget.

Checklist:

  • Use transactions for consistency.
  • Plan versioned onupgradeneeded migrations.
  • Handle blocked and versionchange events.
  • Keep secrets out of client stores.