IDBDatabase: close イベント

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.

close イベントは、データベースの接続が予期せず閉じられた時 IDBDatabase で発火します。例えば、使用しているストレージが取り外されたり、ユーザーがブラウザーの履歴設定でデータベースを消去した場合に発生します。

データベースの接続が IDBDatabase.close() により正常に閉じられた場合は発火しないことに注意してください。

構文

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

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

イベント型

汎用の Event です。

この例ではデータベースを開き、close イベントを監視します。

js
// データベースを開きます
const dBOpenRequest = window.indexedDB.open("toDoList", 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 = dBOpenRequest.result;
  db.addEventListener("close", () => {
    console.log("データベースへの接続が閉じられました");
  });
};

addEventListener() のかわりに onclose プロパティを使った同じ例です。

js
// データベースを開きます
const dBOpenRequest = window.indexedDB.open("toDoList", 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 = dBOpenRequest.result;
  db.onclose = () => {
    console.log("データベースへの接続が閉じられました");
  };
};

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
close event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報