IndexedDB のデータベースを削除するコードと実行結果

概要

IndexedDB のデータベースを削除する場合には、indexedDB.deleteDatabase() メソッドを呼び出します。

書式

indexedDB.deleteDatabase([データベース名]);

実装例

コード

以下のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script type="text/javascript">
    var dbname = "myDB";
    function DeleteMyDatabase() {
      const deleteRequest = indexedDB.deleteDatabase(dbname);

      deleteRequest.onsuccess = function () {
        alert("データベースの削除に成功しました。");
        console.log("データベースの削除に成功しました。");
      };

      deleteRequest.onerror = function (event) {
        alert("データベースの削除に失敗しました:" + event.target.error);
        console.error("データベースの削除に失敗しました:", event.target.error);
      };

      deleteRequest.onblocked = function () {
        alert("データベースの削除がブロックされました。他のタブでデータベースが使用されている可能性があります。");
        console.warn("データベースの削除がブロックされました。他のタブでデータベースが使用されている可能性があります。");
      };
    }
  </script>
</head>
<body>
  <h2>IndexedDB データベースの削除 デモ</h2>
  <a href="javascript:DeleteMyDatabase();">データベースの削除</a><br>
</body>
</html>

解説

リンクをクリックするとDeleteMyDatabase()関数を呼び出します。

indexedDB.deleteDatabase()メソッドを呼び出しデータベースを削除します。

  const deleteRequest = indexedDB.deleteDatabase(dbname);

データベース削除に関するイベントの実装が以下のコードです。イベントに対応したメッセージを画面に表示します。

  deleteRequest.onsuccess = function () {
    alert("データベースの削除に成功しました。");
    console.log("データベースの削除に成功しました。");
  };

  deleteRequest.onerror = function (event) {
    alert("データベースの削除に失敗しました:" + event.target.error);
    console.error("データベースの削除に失敗しました:", event.target.error);
  };

  deleteRequest.onblocked = function () {
    alert("データベースの削除がブロックされました。他のタブでデータベースが使用されている可能性があります。");
    console.warn("データベースの削除がブロックされました。他のタブでデータベースが使用されている可能性があります。");
  };