How do you create a second store in indexeddb?

Question

So here's my first method. I created one store and I created an index "groupname" the value is the whole object which has multiple keys and values. This works but when I try to add another store, the store shows up and the index shows up but the values are empty...

Anyone have any tips for me on how to create a second storeobject?

var dbName = "DSD DB";
var request = window.indexedDB.open(dbName, 2);
var db;

request.onerror = function(event) {
    console.log(event.target.errorCode);
};

request.onsuccess = function(event) {
    db = event.target.result;
    console.log(db);
};

// This event is only implemented in recent browsers   
request.onupgradeneeded = function(event) {
    // Save the IDBDatabase interface 
    var db = event.target.result;

    // Create an objectStore for this database
    var objectStore = db.createObjectStore("groups", { keyPath: "groupname" });

    objectStore.transaction.oncomplete = function(event) {
        // Store values in the newly created objectStore.
        var groupObjectStore = db.transaction("groups", "readwrite").objectStore("groups");
        jsonReceivingOneGroup.groups.forEach(function(group) {
            groupObjectStore.add(group);
        });
        console.log(groupObjectStore);
    };
};

Thanks in advance!

Answer 1

// This event is only implemented in recent browsers   
request.onupgradeneeded = function(event) {
    // Save the IDBDatabase interface 
    var db = event.target.result;

    // Create an objectStore for this database
    var objectStore = db.createObjectStore("groups", { keyPath: "groupname" });

    // Create a second object store
    var aSecondObjectStore = db.createObjectStore("foo");

    var aThirdObjectStore = db.createObjectStore("bar");

    var aFourthObjectStore = db.createObjectStore("baz");

    // etc...
};

If you want to modify an existing database and add a store to it, then you need to open a connection to the database with a higher version number than before. onupgradeneeded only gets called when either (a) the database is created for the first time or (b) the database is opened with a higher version number.

First, modify your onupgradeneeded function to also create the additional object stores. Next, open the database with a higher version number. To open the database with a higher version number:

var openRequest = indexedDB.open(dbName, 3);

I am using 3 here simply because your example shows 2, and 3 is one higher than 2.

Then, when you get this far, you will get an error. When you open with version 3, and the onupgradeneeded function runs, it will try to create the groups object store again. But that store already exists. So now you need to introduce some logic to check for that. There are a couple ways to do it. One simple way is to check if the store already exists, and only create the store if it does not already exist. To check if an object store already exists in the database, you can use db.objectStoreNames.contains

// This event is only implemented in recent browsers   
request.onupgradeneeded = function(event) {
    // Save the IDBDatabase interface 
    var db = event.target.result;

    // Get the list of existing stores, if any
    var stores = db.objectStoreNames;

    // Check whether the store exists before creating it
    if (!stores.contains("groups")) {
      // Create an objectStore for this database
      var objectStore = db.createObjectStore("groups", { keyPath: "groupname" });
    }
};

Answer 2

I was able to create another table with data like this from an ajax call:

var transaction = db.transaction(["pallets"], "readwrite");
var objectStore = transaction.objectStore("pallets");

$.each(masterJson.pallets, function(i, pallet) {
    var request = objectStore.put(pallet);
})

request.onsuccess = function(event) {
    console.log(event.target.response);
};

This link was really helpful: https://dzone.com/articles/complete-sample-app-indexeddb