The Day I Tried to Add a New Store to IndexedDB (And What I Learned)

Let me tell you a little story, a short but valuable one.

The Goal

I was building an app that could save user updates offline, in case they lost internet connection. For that, I used IndexedDB, which is like a small database right inside your browser.

Everything was working fine until I tried to add a new object store.

An object store is like a table in a database. You can have different stores for different kinds of data like notes, tasks, or orders.

The Problem

I had one store already, let’s call it notesStore. Then I wanted to add another one, say, ordersStore.

So I updated my code to use the new store name and expected everything to work…

But the browser threw an error that said:

“The specified object store does not exist.”

What Was Going On?

Here’s what I found: IndexedDB only allows you to create or change stores when the database is being upgraded, and upgrading means bumping the version number.

Beginner’s Analogy

Think of your database like a house. Each object store is a room. If you want to add a new room, you need to renovate the house.

Renovation = upgrading the version. And you can’t renovate unless you raise the house version (even by 1).

So, if you already have version 1, and you want to add a new store, you need to increase it to version 2.

But here’s the catch:

IndexedDB doesn’t do this for you automatically. You have to update the version manually.

And if you forget to update the version? Your new store won’t be created. Your app breaks.

The Manual Way

At first, you might do something like this:

openDB('MyDB', 2, {
  upgrade(db) {
    if (!db.objectStoreNames.contains('ordersStore')) {
      db.createObjectStore('ordersStore', { keyPath: 'id' })
    }
  }
})

This works, but what if you forget to bump the version when you add another store next time?

You’ll keep running into the same problem over and over again.

The Smarter Way: Dynamic Version Bumping

So we fixed it the smart way. We taught our app to:

1. Check if the object store already exists.
2. If it doesn’t exist, check the current version of the database.
3. Increase the version by 1 and create the store during the upgrade step.
4. If it already exists, just open the database normally.

First, we created the following functions to enable us to complete our task:

**storeExists **to check if the object store exists in the database

const storeExists = async (storeName: string, dbName: string): Promise<boolean> => {
    return new Promise((resolve) => {
      const request = indexedDB.open(dbName)
      request.onsuccess = () => {
        const db = request.result
        const exists = db.objectStoreNames.contains(storeName)
        db.close()
        resolve(exists)
      }
      request.onerror = () => resolve(false)
    })
  }

**getCurrentVersion **to obtain the current version of the database

const getCurrentVersion = async (dbName: string): Promise<number> => {
    return new Promise((resolve, reject) => {
      const request = indexedDB.open(dbName)
      request.onsuccess = () => {
        const db = request.result
        const version = db.version
        db.close()
        resolve(version)
      }
      request.onerror = () => reject(request.error)
    })
  }

And it all came nicely together here:

const openDatabase = async (storeName: string): Promise<IDBPDatabase> => {
    // Check if the object store already exists.
    const exists = await storeExists(storeName, dbName)

    // If it doesn't exist, check the current version of the database.
    if (!exists) {
      const currentVersion = await getCurrentVersion(dbName)

      // Increase the version by 1 and create the store during the upgrade step.
      return await openDB(dbName, currentVersion + 1, {
        upgrade(db) {
          if (!db.objectStoreNames.contains(storeName)) {
            db.createObjectStore(storeName, { keyPath: 'id' })
            console.log(`Created object store: ${storeName}`)
          }
        }
      })
    }

    // If it already exists, just open the database normally.
    return await openDB(dbName)
  }

This way, you don’t need to remember the version number or update it manually. Your app takes care of it for you.

The End Result

Now, whenever I want to add a new object store, I don’t panic. I just let my app handle the upgrade quietly in the background.

I hope this proves useful to you.

Have a wonderful day.