How do you add a new index to an existing IndexedDB store?

WHAT THIS TESTS: Your grasp of IndexedDB's strictly versioned schema model and your ability to manage zero-downtime client-side migrations in production. Interviewers want to see that you know schema mutations are gated behind version changes, not arbitrary transactions, and that you can reason about idempotency, incremental upgrades, and concurrent tab behavior.

A GOOD ANSWER COVERS: First, bump the integer version passed to indexedDB.open. The browser detects a higher version and fires onupgradeneeded before onsuccess. Second, inside the onupgradeneeded handler, inspect event.oldVersion to decide which migrations to run. If oldVersion is less than your target, conditionally create the new index with objectStore.createIndex. Third, guard against re-running the same migration by checking if the index already exists or by branching strictly on oldVersion ranges. Fourth, register an onblocked handler because existing connections in other tabs will delay the upgrade until they close. Fifth, note that version numbers are integers subject to rounding, so only use whole numbers.

COMMON WRONG ANSWERS: Attempting to call createIndex during a normal readwrite transaction outside onupgradeneeded. Failing to increment the version number and expecting the schema to change. Writing an upgrade handler that ignores event.oldVersion and blindly recreates object stores or indexes, which throws errors if they already exist. Forgetting that onupgradeneeded runs in its own transaction, meaning you do not manually create one for schema changes.

LIKELY FOLLOW-UPS: How would you handle a user with ten tabs open during the upgrade? What if you need to backfill data into the new index? How do you delete a deprecated index or object store? What happens if you need to downgrade the schema?

ONE CONCRETE EXAMPLE: Suppose the database is at version 2. You call indexedDB.open("AppDB", 3). The browser queues an upgrade. In the onupgradeneeded handler, you read const db = event.target.result. If event.oldVersion < 3, you get the object store via const store = event.target.transaction.objectStore("users"), then call store.createIndex("email_idx", "email", { unique: false }). You do not create a new transaction. After the handler finishes, onsuccess fires and the app resumes normal operations. If another tab holds a connection to version 2, onblocked fires until that tab closes or reloads.

Source: developer.mozilla.org