IDBTransaction: complete event

BaselineWidely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Thecomplete event of theIndexedDB API is fired when the transaction has successfully committed, which is either after you explicit callIDBTransaction.commit() or when all requests have been successfully completed, and after handling their results, no new requests have been placed. SeeIDBTransaction for more information.

Syntax

Use the event name in methods likeaddEventListener(), or set an event handler property.

addEventListener("complete", (event) => { })oncomplete = (event) => { }

Event type

A genericEvent.

Examples

UsingaddEventListener():

// Open the databaseconst 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);    };  };};