IDBDatabase: versionchange イベント

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.

versionchange イベントは、データベースの構造の変更 (IDBOpenDBRequest または IDBFactory.deleteDatabase で upgradeneeded イベントが送られた) が他のどこか (同じコンピューターの別のウインドウまたはタブの可能性が最も高いでしょう) で要求された時発火します。

構文

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

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

イベント型

汎用の Event です。

例

この例ではデータベースを開き、成功時、versionchange のリスナーを追加します。

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

dBOpenRequest.onupgradeneeded = (event) => {
  const db = event.target.result;
  // このデータベース用の 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.addEventListener("success", (event) => {
  const db = event.target.result;
  db.addEventListener("versionchange", (event) => {
    console.log("このデータベースのバージョンが変更されました");
  });
});

onversionchange イベントハンドラープロパティを用いた、同じ例です。

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

dBOpenRequest.onupgradeneeded = (event) => {
  const db = event.target.result;
  // このデータベース用の 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 db = event.target.result;
  db.onversionchange = (event) => {
    console.log("このデータベースのバージョンが変更されました");
  };
};

ブラウザーの互換性

BCD tables only load in the browser

関連情報