diff --git a/files/en-us/web/api/idbfactory/databases/index.md b/files/en-us/web/api/idbfactory/databases/index.md index 123cf46e8cddca7..93d962a93db8217 100644 --- a/files/en-us/web/api/idbfactory/databases/index.md +++ b/files/en-us/web/api/idbfactory/databases/index.md @@ -8,9 +8,9 @@ browser-compat: api.IDBFactory.databases {{ APIRef("IndexedDB") }} {{AvailableInWorkers}} -The **`databases`** method of the {{domxref("IDBFactory")}} interface returns a list representing all the available databases, including their names and versions. +The **`databases`** method of the {{domxref("IDBFactory")}} interface returns a {{jsxref("Promise")}} that fulfills with an array of objects containing the name and version of all the available databases. -> **Note:** This method is introduced in a draft of a specifications and browser compatibility is limited. +This is is a snapshot of the databases, intended primarily to allow web applications to check what databases have been created — in order to, for example, clean up databases created by earlier versions of application code. ## Syntax @@ -20,31 +20,115 @@ databases() ### Parameters -The method does not take in any parameters. +None. ### Return value -A promise that resolves either to an error or a list of dictionaries, each with two elements, `name` and `version`: +A {{jsxref("Promise")}} that fulfills with an an array of objects representing a snapshot of the available databases (or rejects with the error/exceptions below). + +Each array object has the following properties: - `name` - - : The database name. + - : A database name. - `version` - : The database version. +Note that the sequence on the returned objects is undefined. + ### Exceptions - `SecurityError` {{domxref("DOMException")}} - - : Thrown if the method is called from an [opaque origin](https://stackoverflow.com/questions/42239643/when-do-browsers-send-the-origin-header-when-do-browsers-set-the-origin-to-null/42242802#42242802). + + - : Thrown if the method is called from an [opaque origin](https://stackoverflow.com/questions/42239643/when-do-browsers-send-the-origin-header-when-do-browsers-set-the-origin-to-null/42242802#42242802) or the user has disabled storage. + +- `UnknownError` {{domxref("DOMException")}} + - : Thrown if the set of available databases cannot be determined for any reason. ## Examples +### Create and list databases + +This example creates/opens a number of databases. +On successful initialization of each database it lists all the available databases. + +```html hidden +

+```
+
+```js hidden
+const logElement = document.querySelector("#log");
+function log(text) {
+  logElement.innerText = `${logElement.innerText}${text}\n`;
+  logElement.scrollTop = logElement.scrollHeight;
+}
+```
+
+```css hidden
+#log {
+  height: 240px;
+  overflow: scroll;
+  padding: 0.5rem;
+  border: 1px solid black;
+}
+```
+
+#### JavaScript
+
+First we define the function that is used to get and log the available databases.
+This awaits on the promise returned by `indexedDB.databases()` and then iterates the array and lists the values of each element:
+
 ```js
-const promise = indexedDB.databases();
-promise.then((databases) => {
-  console.log(databases);
+async function getDb() {
+  const databases = await indexedDB.databases();
+  log("List databases:");
+  databases.forEach((element) => {
+    log(`name: ${element.name}, version: ${element.version}`);
+  });
+}
+```
+
+To demonstrate how the above function is used, below we create two databases.
+For each database, we log just before the database is opened.
+We also log on successful initialization (or error) and then also log the available databases.
+
+```js
+// 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();
 });
 ```
 
+#### Result
+
+The result is shown below. Note that the time taken to get the databases and their order is undefined.
+
+{{EmbedLiveSample('Create and list databases', '100%', '280px')}}
+
 ## Specifications
 
 {{Specifications}}
diff --git a/files/en-us/web/api/idbfactory/index.md b/files/en-us/web/api/idbfactory/index.md
index bfcb12d7bc59931..0b66729ab87b781 100644
--- a/files/en-us/web/api/idbfactory/index.md
+++ b/files/en-us/web/api/idbfactory/index.md
@@ -11,14 +11,14 @@ The **`IDBFactory`** interface of the [IndexedDB API](/en-US/docs/Web/API/Indexe
 
 ## Instance methods
 
-- {{domxref("IDBFactory.open")}}
-  - : The current method to request opening a [connection to a database](/en-US/docs/Web/API/IndexedDB_API/Basic_Terminology#database_connection).
-- {{domxref("IDBFactory.deleteDatabase")}}
-  - : A method to request the deletion of a database.
-- {{domxref("IDBFactory.cmp")}}
-  - : A method that compares two keys and returns a result indicating which one is greater in value.
-- {{domxref("IDBFactory.databases")}}
-  - : A method that returns a list of all available databases, including their names and versions.
+- {{domxref("IDBFactory.open()")}}
+  - : Requests opening a [connection to a database](/en-US/docs/Web/API/IndexedDB_API/Basic_Terminology#database_connection).
+- {{domxref("IDBFactory.deleteDatabase()")}}
+  - : Requests the deletion of a database.
+- {{domxref("IDBFactory.cmp()")}}
+  - : Compares two keys and returns a result indicating which one is greater in value.
+- {{domxref("IDBFactory.databases()")}}
+  - : Returns a promise that fulfills with an array of all available databases, including their names and versions.
 
 ## Example