IDBTransaction: complete — Ereignis · JavaScript-Referenz

Signatur

transaction.addEventListener("complete", handler)

Beschreibung

Das Ereignis complete wird auf einem IDBTransaction-Objekt ausgelöst, sobald die Transaktion erfolgreich abgeschlossen ist. Das passiert entweder, nachdem Sie IDBTransaction.commit() explizit aufgerufen haben, oder automatisch, sobald alle Anfragen der Transaktion erfolgreich waren und keine neuen Anfragen mehr hinzukommen. Das Ereignis steigt nicht auf (bubbles: false) und ist nicht abbrechbar. Es handelt sich um ein einfaches Event.

Sie können sich auf zwei Arten dafür registrieren: über transaction.addEventListener("complete", handler) oder über die Eigenschaft transaction.oncomplete = handler. Mit addEventListener lassen sich mehrere Handler registrieren. Bei der Eigenschaft ersetzt jede neue Zuweisung den bisherigen Handler.

In der Praxis ist complete das verlässliche Signal, dass Schreibvorgänge dauerhaft gespeichert sind. Das success-Ereignis einer einzelnen IDBRequest bedeutet nur, dass diese Anfrage erfolgreich war. Die Transaktion kann danach aber noch abbrechen (abort) und alle Änderungen zurückrollen. Wenn Sie der Oberfläche einen Erfolg melden oder etwa nach dem Speichern weiterleiten wollen, warten Sie deshalb auf complete.

Ein häufiges Muster ist, die Transaktion in ein Promise einzupacken. Dieses wird bei complete erfüllt und bei error bzw. abort abgelehnt. So lässt sich IndexedDB bequem mit async/await nutzen.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"complete"`.
$handler Pflicht	(event: Event) => void		Callback, der beim erfolgreichen Abschluss aufgerufen wird. `event.target` ist die abgeschlossene `IDBTransaction`.
$options	boolean \| AddEventListenerOptions	false	Optionale Listener-Optionen wie `once` oder `signal`.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Der Handler erhält ein einfaches Event-Objekt.

Beispiele

Erfolg per addEventListener melden

const openReq = indexedDB.open('shop', 1);

openReq.addEventListener('upgradeneeded', () => {
  openReq.result.createObjectStore('produkte', { keyPath: 'id' });
});

openReq.addEventListener('success', () => {
  const db = openReq.result;
  const tx = db.transaction('produkte', 'readwrite');
  const store = tx.objectStore('produkte');

  store.put({ id: 1, name: 'Tastatur', preis: 49.9 });
  store.put({ id: 2, name: 'Maus', preis: 19.9 });

  tx.addEventListener('complete', () => {
    console.log('Alle Produkte gespeichert');
    db.close();
  });

  tx.addEventListener('error', () => {
    console.error('Fehler:', tx.error);
  });
});

Alle Produkte gespeichert

oncomplete-Eigenschaft mit explizitem commit()

const speichereEinstellung = (db, key, value) => {
  const tx = db.transaction('einstellungen', 'readwrite');
  tx.objectStore('einstellungen').put(value, key);

  tx.oncomplete = (event) => {
    console.log(`Gespeichert (Modus: ${event.target.mode})`);
  };
  tx.onabort = () => console.warn('Transaktion abgebrochen');

  // Sofort festschreiben, statt auf das automatische Ende zu warten
  tx.commit();
};

Gespeichert (Modus: readwrite)

Transaktion als Promise für async/await

const txDone = (tx) =>
  new Promise((resolve, reject) => {
    tx.addEventListener('complete', () => resolve(), { once: true });
    tx.addEventListener('error', () => reject(tx.error), { once: true });
    tx.addEventListener('abort', () => reject(tx.error ?? new DOMException('Abgebrochen', 'AbortError')), { once: true });
  });

const notizSpeichern = async (db, notiz) => {
  const tx = db.transaction('notizen', 'readwrite');
  tx.objectStore('notizen').add(notiz);
  await txDone(tx);
  console.log('Notiz dauerhaft gespeichert');
};

Notiz dauerhaft gespeichert

Handler wieder entfernen

const tx = db.transaction('log', 'readwrite');
const onComplete = () => console.log('Log geschrieben');

tx.addEventListener('complete', onComplete);
// ... später, falls die Meldung nicht mehr gebraucht wird:
tx.removeEventListener('complete', onComplete);

// Äquivalent bei der Eigenschaft:
tx.oncomplete = null;
tx.objectStore('log').add({ zeit: Date.now() });

// Wichtig · Fallstricke

Nicht mit success verwechseln: Wenn eine einzelne Anfrage success meldet, sind die Daten noch nicht garantiert gespeichert. Erst complete bestätigt, dass die Transaktion festgeschrieben wurde.
Automatisches Ende: Eine Transaktion endet, sobald keine Anfragen mehr ausstehen und die Kontrolle an die Ereignisschleife zurückgeht. Ein await auf ein fremdes Promise (z. B. fetch) mitten in der Transaktion führt dazu, dass sie vorzeitig abschließt. Weitere Anfragen werfen dann TransactionInactiveError.
Haltbarkeit: Mit db.transaction(store, 'readwrite', { durability: 'relaxed' }) kann complete feuern, bevor die Daten physisch auf den Datenträger geschrieben sind. Das ist schneller, aber bei einem Absturz weniger sicher. Standard ist 'default'. Chrome nutzt seit Version 121 standardmäßig 'relaxed'.
Der Handler sollte registriert werden, bevor Sie die Kontrolle abgeben, also direkt nach dem Erzeugen der Transaktion.
Bei einem Abbruch (abort() oder ein unbehandelter Fehler) feuert statt complete das Ereignis abort. Beide schließen sich gegenseitig aus.
Kompatibilität: complete wird von allen modernen Browsern und in Web Workern unterstützt. commit() gibt es erst seit Chrome 76, Firefox 74 und Safari 15.

Siehe auch

IDBTransaction IDBTransaction.commit() IDBTransaction.abort() IDBDatabase.transaction() IDBTransaction: abort