Last updated at 2023-09-06

IndexedDB Migration Tutorial using IDB

AI Status
Last Edit By
Last edited time
Sep 6, 2023 06:30 PM
Sep 6, 2023
Migrating an IndexedDB database involves making structural changes to the database schema, such as adding or removing object stores and indexes.


This tutorial assumes you know how to add idb to your javascript project.
In short this is how to add idb package to your js project.

Script Tag in html

NPM Package ES Module

import { openDB } from 'idb';

Migration Example Code

Here's a code example along with explanations for each of the mentioned migration scenarios:
const dbName = 'my-database'; const dbVersion = 2; // Increment this for each migration // Step 1: Open the database const db = await openDB(dbName, dbVersion, { upgrade(database, oldVersion, newVersion, transaction) { // Step 2: Check if the object store exists (First Time Add) if (!database.objectStoreNames.contains('data')) { const dataStore = database.createObjectStore('data', { keyPath: 'id', autoIncrement: true }); dataStore.createIndex('name', 'name', { unique: false }); dataStore.createIndex('age', 'age', { unique: false }); } // Step 3: Adding a new index if (oldVersion < 2) { const dataStore = transaction.objectStore('data'); dataStore.createIndex('email', 'email', { unique: true }); } // Step 4: Updating an object store if (oldVersion < 3) { const dataStore = transaction.objectStore('data'); dataStore.deleteIndex('email'); // Remove old index dataStore.createIndex('updatedEmail', 'email', { unique: true }); // Add a new index } // Step 5: Removing an object store if (oldVersion < 4) { database.deleteObjectStore('oldDataStore'); // Remove an object store } // Step 6: Removing an index if (oldVersion < 5) { const dataStore = transaction.objectStore('data'); dataStore.deleteIndex('name'); // Remove an index } }, });
  1. Open the Database: We open the IndexedDB database with a specified name and version number. The version number is essential for tracking schema changes.
  1. Check if Object Store Exists (First Time Add): In the upgrade function, we check if the object store with the name 'data' exists. If it doesn't exist (i.e., this is the first time adding it), we create the object store along with two indexes for 'name' and 'age'.
  1. Adding a New Index: If the database's old version is less than 2 (meaning it hasn't been upgraded to include the new index), we add a new unique index 'email' to the 'data' object store.
  1. Updating an Object Store: If the database's old version is less than 3, we update the 'data' object store by removing the old 'email' index and adding a new unique index 'updatedEmail'. This demonstrates how to modify an object store during a migration.
  1. Removing an Object Store: If the database's old version is less than 4, we remove an entire object store named 'oldDataStore'. This illustrates how to delete an object store during migration.
  1. Removing an Index: If the database's old version is less than 5, we remove the 'name' index from the 'data' object store. This showcases how to delete an index from an object store.
Once you've defined these migration steps in your code, you can perform your database operations using the upgraded schema.
The IndexedDB library will handle the schema migration for you based on the specified version numbers.

Errors That Could Happen

Failed to execute 'transaction' on 'IDBDatabase': A version change transaction is running.

This is because you create a versionchange transaction inside the upgrade function.
The solution is to use the upgrade transaction parameter object rather than create a new one.

Discussion (0)

Related Posts