IndexedDB - 連線

資料庫是有組織地儲存在計算機系統中的結構化資料的集合。要對資料執行操作，我們需要連線到資料庫。在本章中，我們將討論如何建立/連線到資料庫、開啟資料庫以及刪除資料庫。

建立資料庫 - 您可以使用open()函式在 IndexedDB 中建立資料庫。以下是此函式的語法。

let openRequest = indexedDB.open(name, version);

其中，

name 是您需要建立的資料庫的名稱。
version 是要建立的資料庫的版本。此引數的預設值為 1。如果您省略此值，則版本被視為 1。

傳遞給此函式的版本值不應小於當前版本（IndexedDB）。如果資料庫建立成功，則此函式返回 1，如果失敗則返回 0。

示例

以下是 IndexedDB 中建立資料庫的示例

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Indexed db</title>
</head>
<body>
   <script>
      //Creating a database
      const request = indexedDB.open("myDatabase", 1);
      if(indexedDB){
         document.write("Database Created......");
      }
   </script>
</body>
</html>

輸出

如果您將以上程式碼儲存在名為“test.html”的檔案中並執行它，則瀏覽器上將顯示以下訊息：

Database Created......

驗證

由於 IndexedDB 是瀏覽器的內建資料庫，因此您可以在瀏覽器中觀察建立的資料庫。

右鍵單擊結果頁面，單擊“檢查元素”並選擇“應用程式”選項卡。如果展開它，您可以在那裡看到 IndexedDB 資料庫，您可以看到如下所示的已建立的資料庫檔案：

生成處理程式

事件是在 HTML 元素上執行的操作。使用 JavaScript，我們可以處理這些事件。從現在開始，我們使用 JavaScript 處理程式（為了更清楚起見）。

如果請求成功，我們使用onsuccess事件。

request.onerror = event => {
   // Do something (ex: document.write("error");
};

如果請求失敗，我們使用onerror事件。

request.onsuccess = event => {
   // Do something (ex : document.write("success");
};

當您建立資料庫或增加現有資料庫的版本號時，我們使用onupgradeneeded事件。

request.onupgradeneeded = event => {
   var db = event.target.result;
};

示例

以下示例顯示訊息“資料庫建立成功”。如果資料庫建立成功。在這裡，我們使用onsuccess和onerror處理程式來顯示這些訊息。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Handlers</title>
</head>
<body>
   <script>
      const request = indexedDB.open("DATABASE", 1);
      request.onsuccess = function (){
         document.write("Database created successfully...")
      }
      request.onerror = function(){
         document.write("database creation error");
      }
      request.onupgradeneeded = function(event){
         var db = event.target.result;
      }
   </script>
</body>
</html>

輸出

如果您將以上程式碼儲存在名為“test.html”的檔案中並執行它，則瀏覽器上將顯示以下訊息：

Database created successfully...

連線到現有資料庫

要與 IndexedDB 互動，我們使用 JavaScript。我們在 JavaScript 中編寫的程式碼不會直接與資料庫互動。我們需要使用連線物件連線到資料庫以操作資料庫物件。

直接開啟資料庫會建立一個連線。可以有多個到資料庫的連線。當最初建立連線時，它處於開啟狀態。

您可以使用open()函式（我們用於建立資料庫）連線到 IndexedDB 資料庫。

語法

以下是連線到現有資料庫的語法。

let openRequest = indexedDB.open(name, version);

示例

下面給出了一個使用連線物件與現有資料庫互動的 JavaScript 示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <title>OPENING A DATABASE</title>
</head>
<body>
   <script>
      const request = indexedDB.open("DATABASE", 1);
      request.onsuccess = function (){
         document.write("<br> Database created successfully")
      }
      const requestone = indexedDB.open("Database1",2);
      requestone.onsuccess = function(){
         document.write("<br> Database created successfully");
      }
      const requesttwo = indexedDB.open("DATABASE",1);
      requesttwo.onsuccess = function(){
         document.write("<br> Database opened successfully");
      }
   </script>
</body>
</html>

輸出

以上程式在瀏覽器上列印以下輸出：

Database created successfully 
Database opened successfully 
Database created successfully

如果請求成功，則將呼叫名為 onsuccess 的事件。

在瀏覽器中檢查資料庫的另一種方法

除了檢查元素之外，還有另一種方法可以在瀏覽器中檢查 IndexedDB 資料庫。

在右上角，將有一個自定義和控制按鈕，單擊它。

在列表中選擇更多工具選項，然後選擇開發者工具。

在下一頁上選擇“應用程式”選項卡，您可以在其中看到 IndexedDB 資料庫。

刪除資料庫

如果存在任何我們不需要的或不必要地佔用空間的資料庫，我們可以將其刪除。要刪除資料庫，我們可以使用deleteDatabase()函式。

以下是deleteDatabase()函式的語法：

let deleteRequest = indexedDB.deleteDatabase(name)

這裡，name引數是我們想要刪除的資料庫的名稱。

示例

以下示例建立一個名為 TestDatabase 的資料庫，並使用deleteDatabase()函式將其刪除。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Indexed db</title>
</head>
<body>
   <script> 
      const request = indexedDB.open("TestDatabase", 1);
      request.onsuccess = function () {
         document.write("Database Created Successfully");
      }; 
      var req = indexedDB.deleteDatabase("TestDatabase");
      req.onsuccess = function () {
         document.write("Database Deleted Successfully");
      };
      req.onerror = function () {
         document.write("Couldn't delete the database");
      };
   </script>
</body>
</html>

直接從瀏覽器刪除資料庫

建立資料庫後，您可以直接從瀏覽器中刪除該資料庫。為此，請按照以下步驟操作：

步驟 1 - 開啟可以在瀏覽器中看到 IndexedDB 資料庫（儲存）的頁面，使用以下方法之一

檢查選項 - 右鍵單擊 → 檢查 → 應用程式或，
開發者工具 - 自定義和控制選項 → 更多工具 → 開發者工具 → 應用程式

步驟 2 - 如果展開 IndexedDB 儲存，您可以觀察到建立的資料庫列表，如下所示。

步驟 3 - 單擊要刪除的資料庫。在右側，您會找到刪除資料庫按鈕。如果單擊它，此資料庫將被刪除。

關閉資料庫

要關閉資料庫，我們需要使用函式IDBDatabase.close()

語法

IDBDatabase.close();

IDBDatabase 介面的close()方法會立即返回並關閉連線。

在所有事務完成之前，連線不會關閉，但是，無法為此連線建立新事務，並且如果關閉操作正在掛起，則方法會丟擲異常。

列印頁面