Indexeddb 简明教程

IndexedDB - Connection

数据库是一个有序的、结构化数据集合,这些数据存储在计算机系统中。为了对数据执行操作,我们需要连接到数据库。在本章中,我们将讨论如何创建/连接到数据库、打开数据库和删除数据库。

Creating a database - 你可以使用 open() 函数在 IndexedDB 中创建一个数据库。以下是此函数的语法。

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

其中,

  1. name 是你要创建的数据库的名称。

  2. version 是要创建的数据库的版本。此参数的默认值为 1。如果你省略此值,则版本将被视作 1。

你要传递给此函数的版本值不应低于当前版本(IndexedDB 的版本)。如果成功创建了数据库,则此函数返回 1;如果创建失败,则返货 0。

Example

以下是 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>

Output

如果您把上面的代码保存在文件“ test.html ”中并运行它,浏览器将显示以下消息:

Database Created......

Verification

因为 IndexedDB 是浏览器内置的数据库,所以在浏览器中就能看到创建的数据库。

右键点击生成页面,点击“检查元素”并选取“应用标签”。如果展开此选项卡,您可以在其中看到 IndexedDB 数据库,您可以看到创建的数据库文件,如下所示:

indexeddb files

Generating Handlers

event 是在 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;
};

Example

以下示例显示消息“ database creation success ”。如果数据库创建成功。在这里,我们使用 onsuccessonerror 处理程序来显示这些消息。

<!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>

Output

如果您把上面的代码保存在文件 “test.html” 中并运行它,浏览器将显示以下消息:

Database created successfully...

Connecting to an existing database

为了与 IndexedDB 交互,我们使用 JavaScript。我们用 JavaScript 撰写的代码并不会直接与数据库交互。我们需要使用连接对象连接到数据库,以操作数据库的对象。

直接打开数据库会创建一个连接。一个数据库可以有多个连接。当创建连接之初,它处于打开状态。

您可以使用 open() 函数连接到 IndexedDB 数据库(我们用来创建数据库)。

Syntax

下面是连接到现有数据库的语法。

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

Example

下面给出了一个使用带有连接对象的 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>

Output

以上的程序在浏览器上打印以下输出:

Database created successfully
Database opened successfully
Database created successfully

如果请求成功,那么将调用名为 onsuccess 的事件。

Another way to check databases in the browser

除了检查元素之外,还有另一种方法可以在浏览器中检查 IndexedDB 数据库。

在右上角将有一个“自定义和控制”按钮,点击它。

在列表中选择 More tools 选项,然后选择 Developer tools

more tools

在下一页中选择“应用程序”选项卡,您可以在其中看到 IndexedDB 数据库。

opening database

Deleting a database

如果有我们不需要的或没有必要占用空间的任何数据库,我们可以将其删除。要删除数据库,我们可以使用 deleteDatabase() 函数。

以下是 deleteDatabase() 函数的语法 −

let deleteRequest = indexedDB.deleteDatabase(name)

这里, name 参数是我们想要删除的数据库的名称。

Example

以下示例创建了一个名为 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>

Deleting a database Directly From the browser

创建数据库后,您可以直接从浏览器中删除它。要执行此操作,请按照以下步骤操作 −

Step 1 − 使用以下方式之一在浏览器中打开可以看到 IndexedDB 数据库(存储)的页面

  1. Inspect option − 鼠标右键单击 → 检查 → 应用程序,或

  2. Developer tools − 自定义和控制选项 → 更多工具 → 开发者工具 → 应用程序

Step 2 − 如果您展开 IndexedDB 存储,可以看到如下图所示的已创建数据库列表。

test

Step 3 − 单击要删除的数据库。在右侧,您将找到 Delete Database 按钮。如果单击它,将删除此数据库。

delete database

Closing a database

要关闭数据库,我们需要使用函数 IDBDatabase.close()

Syntax

IDBDatabase.close();

IDBDatabase 接口的 close() 方法会立即返回并关闭连接。

在所有事务都完成之前,连接并未关闭,但是无法对此连接创建新事务,并且如果挂起关闭操作,方法会引发异常。