IDBDatabase: versionchange event
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The versionchange event is fired when a database structure change (upgradeneeded event send on an IDBOpenDBRequest or IDBFactory.deleteDatabase) was requested elsewhere (most probably in
another window/tab on the same computer).
Syntax
Use the event name in methods like addEventListener(), or set an event handler property.
js
addEventListener("versionchange", (event) => { })
onversionchange = (event) => { }
Event type
A generic Event.
Examples
This example opens a database and, on success, adds a listener to versionchange:
js
// Open the database
const dBOpenRequest = window.indexedDB.open("Nonexistent", 4);
dBOpenRequest.onupgradeneeded = (event) => {
const db = event.target.result;
// Create an objectStore for this database
const objectStore = db.createObjectStore("toDoList", {
keyPath: "taskTitle",
});
// define what data items the objectStore will contain
objectStore.createIndex("hours", "hours", { unique: false });
objectStore.createIndex("minutes", "minutes", { unique: false });
objectStore.createIndex("day", "day", { unique: false });
objectStore.createIndex("month", "month", { unique: false });
objectStore.createIndex("year", "year", { unique: false });
};
dBOpenRequest.addEventListener("success", (event) => {
const db = event.target.result;
db.addEventListener("versionchange", (event) => {
console.log("The version of this database has changed");
});
});
The same example, using the onversionchange event handler property:
js
// Open the database
const dBOpenRequest = window.indexedDB.open("Nonexistent", 4);
dBOpenRequest.onupgradeneeded = (event) => {
const db = event.target.result;
// Create an objectStore for this database
const objectStore = db.createObjectStore("toDoList", {
keyPath: "taskTitle",
});
// define what data items the objectStore will contain
objectStore.createIndex("hours", "hours", { unique: false });
objectStore.createIndex("minutes", "minutes", { unique: false });
objectStore.createIndex("day", "day", { unique: false });
objectStore.createIndex("month", "month", { unique: false });
objectStore.createIndex("year", "year", { unique: false });
};
dBOpenRequest.onsuccess = (event) => {
const db = event.target.result;
db.onversionchange = (event) => {
console.log("The version of this database has changed");
};
};
Specifications
| Specification |
|---|
| Indexed Database API 3.0 # eventdef-idbdatabase-versionchange |
| Indexed Database API 3.0 # dom-idbdatabase-onversionchange |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
versionchange event
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support