Prerequisite

Script Tag in html

NPM Package ES Module

import { openDB } from 'idb';

Migration Example Code

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.

2. 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'.

3. 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.

4. 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.

5. 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.

6. 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.

Errors That Could Happen

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