IndexedDB のデータベースを開くコードと実行結果

概要

IndexedDB のデータベースを扱う際にはデータベースを開く処理が必要です。この記事では、IndexedDB のデータベースを開くコードと実行結果を紹介します。

書式

  (IDBOpenDBRequest Object) = indexedDB.open([データベース名], [データベースのバージョン]);

  (IDBOpenDBRequest Object).onsuccess = function (event) {
    //データベースオープンに成功した場合の処理
  }

  (IDBOpenDBRequest Object).onerror = function (event) {
    //データベースオープンに失敗した場合の処理
  };

または

  (IDBOpenDBRequest Object) = indexedDB.open([データベース名], [データベースのバージョン]);

  (IDBOpenDBRequest Object).onerror = (event) => {
    //データベースオープンに成功した場合の処理
  };

  (IDBOpenDBRequest Object).onsuccess = (event) => {
    //データベースオープンに失敗した場合の処理
  };

実装例

コード

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>

  <script type="text/javascript">
  var dbname = "myDB";
  var db;

  function OpenMyDatabase() {
    const request = indexedDB.open(dbname, 1);

    request.onsuccess = function (event) {
      db = event.target.result;
      alert('データベースをオープンしました。:' + db.name);
    }

    request.onerror = function (event) {
      console.error("データベースのオープンに失敗しました:", event.target.error);
    };
  }
  </script>
</head>
<body>
  <h2>IndexedDB のデータベースを開くデモ</h2>
  <a href="javascript:OpenMyDatabase();">データベースを開く</a><br>

</body>
</html>

解説

ページの[データベースを開く]リンクをクリックすると以下のOpenMyDatabase()関数を実行します。
indexedDB.open()関数を呼び出します。データベースが開けた場合には、「データベースをオープンしました。:(データベース名)」のアラートダイアログを表示します。

  function OpenMyDatabase() {
    const request = indexedDB.open(dbname, 1);

    request.onsuccess = function (event) {
      db = event.target.result;
      alert('データベースをオープンしました。:' + db.name);
    }

    request.onerror = function (event) {
      console.error("データベースのオープンに失敗しました:", event.target.error);
    };
  }