IDBDatabase: versionchange イベント

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

構文

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

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

イベント型

汎用の Event です。

例

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

// データベースを開きます
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 イベントハンドラープロパティを用いた、同じ例です。

// データベースを開きます
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

関連情報