IDBOpenDBRequest: blocked イベント

blocked ハンドラーは、データベースへのオープン中の接続が同じデータベースの versionchange トランザクションをブロックしているとき実行されます。

このイベントはキャンセルできず、バブリングしません。

構文

addEventListener() のようなメソッドでイベント名を用いるか、イベントハンドラープロパティを設定します。

js
addEventListener("blocked", (event) => {});

onblocked = (event) => {};

イベント型

IDBVersionChangeEvent です。Event を継承します。

Event IDBVersionChangeEvent

イベントプロパティ

親の Event インターフェイスからもプロパティを継承します。

IDBVersionChangeEvent.oldVersion 読取専用

データベースの古いバージョンを返します。

IDBVersionChangeEvent.newVersion 読取専用

データベースの新しいバージョンを返します。

例

addEventListener() を用いた例:

js
// データベースを開きます
const DBOpenRequest = window.indexedDB.open("toDoList", 4);

DBOpenRequest.onupgradeneeded = (event) => {
  const db = event.target.result;

  db.onerror = () => {
    console.log("データベースの作成中にエラー発生");
  };

  // このデータベース用の objectStore を作成します
  const objectStore = db.createObjectStore("toDoList", {
    keyPath: "taskTitle",
  });

  // objectStore に保存するデータアイテムを定義します
  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 req2 = indexedDB.open("toDoList", 5);

  // この場合、onblocked ハンドラーが実行されます
  req2.addEventListener("blocked", () => {
    console.log("要求がブロックされました");
  });
};

onblocked プロパティを用いた例:

js
// データベースを開きます
const DBOpenRequest = window.indexedDB.open("toDoList", 4);

DBOpenRequest.onupgradeneeded = (event) => {
  const db = event.target.result;

  db.onerror = () => {
    console.log("データベースの作成中にエラー発生");
  };

  // このデータベース用の objectStore を作成します
  const objectStore = db.createObjectStore("toDoList", {
    keyPath: "taskTitle",
  });

  // objectStore に保存するデータアイテムを定義します
  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 req2 = indexedDB.open("toDoList", 5);

  // この場合､onblocked ハンドラーが実行されます
  req2.onblocked = () => {
    console.log("要求がブロックされました");
  };
};

ブラウザーの互換性

BCD tables only load in the browser

関連情報