IDBOpenDBRequest: blocked 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 blocked handler is executed when an open connection to a database is blocking a versionchange transaction on the same database.
This event is not cancelable and does not bubble.
Syntax
Use the event name in methods like addEventListener(), or set an event handler property.
js
addEventListener("blocked", (event) => { })
onblocked = (event) => { }
Event type
An IDBVersionChangeEvent. Inherits from Event.
Event properties
Also inherits properties from its parent, Event interface.
IDBVersionChangeEvent.oldVersionRead only-
Returns the old version of the database.
IDBVersionChangeEvent.newVersionRead only-
Returns the new version of the database.
Examples
Using addEventListener():
js
// Open the database
const DBOpenRequest = window.indexedDB.open("toDoList", 4);
DBOpenRequest.onupgradeneeded = (event) => {
const db = event.target.result;
db.onerror = () => {
console.log("Error creating database");
};
// 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) => {
// Let's try to open the same database with a higher revision version
const req2 = indexedDB.open("toDoList", 5);
// In this case the onblocked handler will be executed
req2.addEventListener("blocked", () => {
console.log("Request was blocked");
});
};
Using the onblocked property:
js
// Open the database
const DBOpenRequest = window.indexedDB.open("toDoList", 4);
DBOpenRequest.onupgradeneeded = (event) => {
const db = event.target.result;
db.onerror = () => {
console.log("Error creating database");
};
// 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) => {
// Let's try to open the same database with a higher revision version
const req2 = indexedDB.open("toDoList", 5);
// In this case the onblocked handler will be executed
req2.onblocked = () => {
console.log("Request was blocked");
};
};
Specifications
| Specification |
|---|
| Indexed Database API 3.0 # eventdef-idbopendbrequest-blocked |
Browser compatibility
Loading…