How to create IndexedDb stores in a transaction?

Question

I am creating a local IndexedDB for the first time and the browser fires onupgradeneeded request in response to window.indexedDB.open method.

I would like to create multiple tables (eg stores) in the onupgradeneeded event, but I'd like to do it in a transaction.

I see that transaction object supports `.objectStore', but that implies already having created the store/table.

How do I create multiple stores and wrap it in a transaction?

Answer 1

You can create multiple object store in onupgradeneeded event handler. It is already in transaction. In fact, it is global exclusive transaction on the database.

After you created required object stores and their indexes, you can create transaction on the database connection. You just need to pass list of object stores in db.transaction .

You can use the transaction onupgradeneeded , but better use only for creating object stores there. Create another transaction for reading and writing after finishing onupgradeneeded event.

Answer 2

To create multiple object stores within onupgradeneeded:

var request = indexedDB.open(...);
request.onupgradeneeded = function(event) {
  // side note: this === request === event.target === event.currentTarget
  var db = this.result;
  // Create 0 or more object stores here using this one instance of IDBDatabase.
  db.createObjectStore(...);
  db.createObjectStore(...);
  ...
};

The onupgradeneeded event creates an implicit transaction within the IDBRequest object that is of type VERSION_CHANGE. The transaction applies to all calls within the onupgradeneeded callback. Each of the createObjectStore calls above implicitly use the same transaction.

You can, if you want, get a reference to this transaction use this.transaction within this function. Here you are accessing the implicitly-generated transaction property of the open request, which references an IDBTransaction object that was created for you (with type set to VERSION_CHANGE), which is notably different than creating a transaction explicitly using the IDBDatabase.prototype.transaction method .

Answer 3

Run this example of IndexedDB transaction in the console of your browser

let db;
dbName = "Jokes";
dbVersion = 5;
const request = indexedDB.open(dbName, dbVersion);

request.onupgradeneeded = e => {
    db = e.target.result
    console.log(db);
    const jstore = db.createObjectStore("JokeStore", { keyPath: "title" });
    const mstore = db.createObjectStore("MockStore", { keyPath: "title" });
    alert("upgrade");
}

request.onsuccess = e => {
    db = e.target.result
    console.log(db);
    alert("success");
}

request.onerror = e => {
    alert("error" + e.target.error);
}

const tx = db.transaction("JokeStore", "readwrite");

tx.onerror = e => alert(e.target.error);

const jstoretx = tx.objectStore("JokeStore");

jstoretx.add({ title: "Knock Knock", text: "Who's there? There is a place." });

It creates an entry in the database store.