const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

#log {
  height: 240px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

JavaScript

最初に、利用できるデータベースを取得し、ログ出力するために使用する関数を定義します。これは indexedDB.databases() が返すプロミスを待ち、配列を反復処理して各要素の値を返します。

async function getDb() {
  const databases = await indexedDB.databases();
  log("List databases:");
  databases.forEach((element) => {
    log(`name: ${element.name}, version: ${element.version}`);
  });
}

上記の関数がどのように使用されるかを示すために、下記では 2 つのデータベースを作成しています。それぞれのデータベースについて、データベースを開くためのログを出力します。また、初期化に成功した（あるいはエラーが発生した）場合にもログを出力し、利用できるデータベースについてもログを出力します。

// Create a database named toDoList with default version (1)
const dbName1 = "toDoList";
log(`Opening: ${dbName1}`);
let DBOpenRequest = window.indexedDB.open(dbName1);

DBOpenRequest.addEventListener("error", (event) => {
  log(`Error opening: ${dbName1}`);
  getDb();
});

DBOpenRequest.addEventListener("success", (event) => {
  log(`Initialized: ${dbName1}`);
  getDb();
});

// Create database "AnotherDb"
const dbName2 = "AnotherDb";
log(`Opening ${dbName2}`);
DBOpenRequest = window.indexedDB.open(dbName2, 2);

DBOpenRequest.addEventListener("error", (event) => {
  log(`Error opening: ${dbName2}`);
  getDb();
});

DBOpenRequest.addEventListener("success", (event) => {
  log(`Initialized: ${dbName2}`);
  getDb();
});

結果

結果を下記に示します。データベースとその順序を取得するのにかかる時間は未定義であることに注意してください。

仕様書

Specification
Indexed Database API 3.0 # ref-for-dom-idbfactory-databases①

ブラウザーの互換性

BCD tables only load in the browser