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