The complete
event of the IndexedDB API is fired when the transaction has successfully committed, which is either after you explicit call IDBTransaction.commit()
or when all requests have been successfully completed, and after handling their results, no new requests have been placed. See IDBTransaction
for more information.
IDBTransaction: complete event
Syntax
Use the event name in methods like addEventListener()
, or set an event handler property.
js
addEventListener("complete", (event) => {}); oncomplete = (event) => {};
Event type
A generic Event
.
Examples
Using addEventListener()
:
js
// Open the database const DBOpenRequest = window.indexedDB.open("toDoList", 4); DBOpenRequest.onupgradeneeded = (event) => { const db = event.target.result; db.onerror = () => { console.log("Error creating database"); }; // Create an objectStore for this database const objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle", }); // define what data items the objectStore will contain objectStore.createIndex("hours", "hours", { unique: false }); objectStore.createIndex("minutes", "minutes", { unique: false }); objectStore.createIndex("day", "day", { unique: false }); objectStore.createIndex("month", "month", { unique: false }); objectStore.createIndex("year", "year", { unique: false }); }; DBOpenRequest.onsuccess = (event) => { const db = DBOpenRequest.result; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(["toDoList"], "readwrite"); // add a listener for `complete` transaction.addEventListener("complete", (event) => { console.log("Transaction was completed"); }); const objectStore = transaction.objectStore("toDoList"); const newItem = { taskTitle: "my task", hours: 10, minutes: 10, day: 10, month: "January", year: 2019, }; const objectStoreRequest = objectStore.add(newItem); objectStoreRequest.onsuccess = () => { // Issue a second request in the onsuccess handler, // so we can run this request after the first one completes, // while still reusing the same transaction const getAllRequest = objectStore.getAll(); getAllRequest.onsuccess = () => { // No more requests, so the transaction completes after running this handler console.log(getAllRequest.result); }; }; };
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | WebView Android | ||
complete_event |
23 | 12 | 10 | 15 | 8 | 25 | 22 | 14 | 8 | 1.5 | 4.4 |
See also
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/IDBTransaction/complete_event