IndexedDB Basics

IndexedDB is the browser's built-in NoSQL database for storing large amounts of structured data. Unlike localStorage, it is asynchronous and can hold files, blobs, and complex objects.

const request = indexedDB.open('myDB', 1);

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  db.createObjectStore('tasks', { keyPath: 'id', autoIncrement: true });
};

request.onsuccess = (e) => {
  const db = e.target.result;

  // Add a record
  const tx = db.transaction('tasks', 'readwrite');
  tx.objectStore('tasks').add({ title: 'Buy milk', done: false });

  // Read all records
  const readTx = db.transaction('tasks', 'readonly');
  const getAll = readTx.objectStore('tasks').getAll();
  getAll.onsuccess = () => console.log(getAll.result);
};

When to Use IndexedDB

Use IndexedDB when you need to store more than ~5 MB, need to query or index data, or need to store binary data like images or files. For simple key-value persistence, localStorage is simpler. Libraries like Dexie.js wrap IndexedDB with a cleaner Promise-based API.