IndexedDB: Die Browser-Datenbank für strukturierte Daten

IndexedDB ist eine eingebaute NoSQL-Datenbank im Browser. Anders als localStorage und sessionStorage kann sie große Mengen strukturierter Daten speichern — Objekte, Dateien und Blobs — und das vollständig asynchron und transaktional.

Warum IndexedDB?

Die Web-Storage-Speicher sind klein (etwa 5 MB pro Origin) und synchron. IndexedDB dagegen bietet je nach Browser mehrere Gigabyte Speicherplatz (Chromium erlaubt bis zu 60 Prozent der freien Platte) und blockiert den Haupt-Thread nicht. Damit ist sie die Grundlage für Progressive Web Apps, Offline-Anwendungen und lokale Daten-Caches.

Kernkonzepte

  • Object Stores: Statt Tabellen gibt es Stores, die beliebige JavaScript-Objekte aufnehmen (wie Collections in NoSQL-Datenbanken).
  • Transaktionen: Alle Operationen laufen in Transaktionen mit ACID-Garantien — bei einem Abbruch wird nichts halb geschrieben.
  • Indizes: Objekte können über beliebige Felder indexiert werden, damit Suchen schnell bleiben.
  • Asynchron: Zugriffe laufen über Callbacks, Events oder Promise-Bibliotheken wie idb oder Dexie — der Haupt-Thread bleibt frei.
  • Versionierung: Beim Öffnen mit einer neuen Versionsnummer feuert das onupgradeneeded-Event, in dem das Schema angepasst wird.
const request = indexedDB.open('meine-db', 1);

request.onupgradeneeded = (event) => {
  const db = event.target.result;
  const store = db.createObjectStore('notizen', { keyPath: 'id' });
  store.createIndex('datum', 'datum');
};

Einsatzfälle

  • Offline-Daten für Service Worker und PWAs
  • Große lokale Datensätze (Messwerte, Medien, Dokumente)
  • Cache für API-Antworten und Sync-Warteschlangen
  • Spiele mit umfangreichen Spielständen

Verwandte Grundlagen: localStorage, sessionStorage, Cookie, Cache, Service Worker, PWA.