为什么没有在现有的indexedDB上创建新的objectStore？

Question

I have an existing indexedDb and I need to add a couple of new objectStores to it.

I'm increasing the version number and, in the onupgradeneeded function, building the objectStores if they don't already exist.

            var db;
            var dbName = 'dev';
            var request = window.indexedDB.open(dbName, 2);

            request.onblocked = function(event) {
                // 
            };

            request.onerror = function (event) {
                //
            };

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

            request.onupgradeneeded = function (event) {
                var db = event.target.result;
                console.log(`Upgrading to version ${db.version}`);
                if (!db.objectStoreNames.contains('existing_store_1')) {
                    var existingStore1 = db.createObjectStore('existing_store_1', {keyPath: 'id'});
                }
                if (!db.objectStoreNames.contains('existing_store_2')) {
                    var existingStore2 = db.createObjectStore('existing_store_2', {keyPath: 'id'});
                }
                if (!db.objectStoreNames.contains('new_store_1')) {
                    var newStore1 = db.createObjectStore('new_store_1', {keyPath: 'id'});
                }
                if (!db.objectStoreNames.contains('new_store_2')) {
                    var newStore2 = db.createObjectStore('new_store_2', {keyPath: 'id'});
                }
            };

            return db;

When I refresh the site, the database version does jump to the new version number, but the new objectStores aren't created. If I delete the database and refresh, it creates the database with all of the objectStores, including the new ones.

Obviously I need new users to have the entire database built with all objectStores, and existing users to have the new objectStores built without deleting their existing database.

What am I doing wrong?

I have seen this How to add a new Objectstore to an existing indexeddb but it doesn't answer my question.

Answer 1

My first guess, it is related to return db; . That signals that you might be trying to use this synchronously, and are not waiting for things to happen, and you might be holding a reference to the prior instance of the IDBDatabase variable instead of the new one. I'm partly saying this not because it is specific to your code but just because the fact that idb ops tend to be async and async is tough for many devs and is a common problem.

Try the following and see if it helps. First, no more global var db variable usage. Second, write a function for connecting that looks like this:

function connect(callbackFunction) {
   var openRequest = ...;
   openRequest.onupgradeneeded = ...;
   openRequest.onsuccess = function(event) {
     var db = event.target.result;
     callbackFunction(db);
   };
}

// Now to use it, you can only refer to db from within the callback

connect(function onConnected(db) {
  console.log('Use the db variable inside the function');
});

console.log('never try to use the db variable here');