HTML5 IndexedDB

引言

IndexedDB 是一个新的 HTML5 网络数据库，允许 HTML5 网络应用程序将数据存储在用户的浏览器中。对于需要在客户端或 Web 浏览器（如 Chrome、Internet Explorer、Firefox 等）上存储大量数据的应用程序，IndexedDB 更强大且更有用。在本文中，我将解释一些关于它的基本概念。

什么是 IndexedDB？

IndexedDB 是一个新的 HTML5 数据存储，用于在客户端存储/操作数据。这使得应用程序比以往任何时候都更快、更具响应性。它与具有表和记录的关系数据库不同。它影响我们设计和构建应用程序的方式。IndexedDB 为一种数据类型创建一个对象存储，并简单地将 JavaScript 对象持久化到该存储中。每个对象存储都可以有一组索引，这些索引可以有效地查询和迭代。本教程提供了一个如何在任何 Web 应用程序中使用IndexedDB 的实际示例。

入门

我们需要包含以下实现前缀。

var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
 
//prefixes of window.IDB objects
var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange
 
if (!indexedDB) {
    alert("Your browser doesn't support a stable version of IndexedDB.")
} 

打开 IndexedDB

在创建数据库之前，我们首先需要为数据库创建一些数据。假设我们有一些如下所示的客户信息

var userData = [
  { id: "1", name: "Tapas", age: 33, email: "tapas@example.com" },
  { id: "2", name: "Bidulata", age: 55, email: "bidu@home.com" }
];

现在，我们需要使用open() 方法打开我们的数据库，如下所示：

var db;
var request = indexedDB.open("databaseName", 1);
 
request.onerror = function(e) {
  console.log("error: ", e);
};
 
request.onsuccess = function(e) {
  db = request.result;
  console.log("success: "+ db);
};
request.onupgradeneeded = function(e) {
 
}

如上所示，我们已经打开了一个名为“databaseName”的数据库以及数据库的版本。open() 方法接受 2 个参数

• 第一个参数：数据库的名称。它检查名为“databaseName”的数据库是否存在，如果不存在，则打开数据库，否则创建新的数据库。
• 第二个参数：数据库的版本，允许用户更新数据库的模式。

成功处理程序

如果所有请求都成功，则会触发成功事件“onsuccess”，并且我们将其结果保存到 db 变量中以备后用。

错误处理程序

如果打开数据库的过程失败，则会触发错误事件“onerror”。

onupgradeneeded 处理程序

如果要更新数据库（或创建、删除或修改数据库），则必须实现onupgradeneeded 处理程序，该处理程序允许您对数据库进行任何更改。“onupgradeneeded”处理程序是更改数据库结构的唯一位置。

创建和向表中添加数据

IndexedDB 使用对象存储来存储数据，而不是表。每当将值存储在对象存储中时，它都会与一个键相关联。它允许我们在任何对象存储上创建索引。索引允许我们访问存储在对象存储中的值。以下代码显示了我们如何创建对象存储并将预先准备好的数据插入到其中

request.onupgradeneeded = function(event) {
        var objectStore = event.target.result.createObjectStore("users", {keyPath: "id"});
        for (var i in userData) {
                objectStore.add(userData[i]);      
        }
}

我们使用createObjectStore() 方法创建对象存储。此方法接受两个参数：存储的名称和参数对象。在这里，我们将对象存储命名为“users”，并定义了一个keyPath，它是使存储中的单个对象唯一属性。在这里，我们使用“id”作为keyPath，它是对象存储中的唯一值，我们必须确保对象存储中的每个对象都必须具有“id”属性。创建对象存储后，我们可以使用for循环开始向其中添加数据。

手动向表中添加数据

我们可以手动向数据库中添加额外的数据。

function Add() {
        var request = db.transaction(["users"], "readwrite").objectStore("users")
                .add({ id: "3", name: "Gautam", age: 30, email: "gautam@store.org" });
                                 
        request.onsuccess = function(e) {
                alert("Gautam has been added to the database.");
        };
         
        request.onerror = function(e) {
                alert("Unable to add the information.");       
        }         
}

在我们对数据库进行任何 CRUD 操作（读取、写入、修改）之前，我们必须使用事务。transaction() 方法用于指定我们希望事务跨越哪些对象存储。transaction() 方法接受 3 个参数（第二个和第三个是可选的）。第一个是我们想要处理的对象存储列表，第二个是我们是否只想读取/读写对象，第三个是版本更改。

从表中检索数据

get() 方法用于从对象存储中检索数据。因为我们之前已经将对象的 id 设置为keyPath，所以get() 方法将查找具有相同 id 值的对象。这将返回名为“Bidulata”的对象。

function Read() {
        var objectStore = db.transaction(["users"]).objectStore("users");
        var request = objectStore.get("2");
        request.onerror = function(event) {
          alert("Unable to retrieve data from database!");
        };
        request.onsuccess = function(event) {          
          if(request.result) {
                alert("Name: " + request.result.name + ", Age: " + 
                       request.result.age + ", Email: " + request.result.email);
          } else {
                alert("Bidulata couldn't be found in your database!"); 
          }
        };
}

从表中检索所有数据

以下方法从对象源检索所有数据。在这里，我们使用游标从对象存储中检索所有数据

function ReadAll() {
        var objectStore = db.transaction("users").objectStore("users");  
        var req = objectStore.openCursor();

        req.onsuccess = function(event) {
      db.close();
          var res = event.target.result;
          if (res) {
                alert("Key " + res.key + " is " + res.value.name + ", Age: " + 
                       res.value.age + ", Email: " + res.value.email);
                res.continue();
          }
        }; 

        req.onerror = function (e) {
            console.log("Error Getting: ", e);
        };    
}

openCursor() 用于迭代数据库中的多个记录。continue() 函数用于继续循环的下一个迭代。

 

从表中删除记录

以下方法从对象源中删除记录。

function Remove() { 
        var request = db.transaction(["users"], 
        "readwrite").objectStore("users").delete("1");
        request.onsuccess = function(event) {
          alert("Tapas's entry has been removed from your database.");
        };
}

我们必须将要删除的对象的keyPath作为参数传递给delete() 方法。

最终代码

以下方法从对象源中删除记录。

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IndexedDB</title>
<script type="text/javascript">
var indexedDB = window.indexedDB || window.mozIndexedDB || 
                    window.webkitIndexedDB || window.msIndexedDB;
 
//prefixes of window.IDB objects
var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange
 
if (!indexedDB) {
    alert("Your browser doesn't support a stable version of IndexedDB.")
}

var customerData = [
  { id: "1", name: "Tapas", age: 33, email: "tapas@example.com" },
  { id: "2", name: "Bidulata", age: 55, email: "bidu@home.com" }
];

var db;
var request = indexedDB.open("newDatabase", 1);
 
request.onerror = function(e) {
  console.log("error: ", e);
};
 
request.onsuccess = function(e) {
  db = request.result;
  console.log("success: "+ db);
};
 
request.onupgradeneeded = function(event) {
 
}

request.onupgradeneeded = function(event) {
        var objectStore = event.target.result.createObjectStore("users", {keyPath: "id"});
        for (var i in userData) {
                objectStore.add(userData[i]);      
        }
}

function Add() {
        var request = db.transaction(["users"], "readwrite")
                .objectStore("users")
                .add({ id: "3", 
                       name: "Gautam", age: 30, email: "gautam@store.org" });
                                 
        request.onsuccess = function(e) {
                alert("Gautam has been added to the database.");
        };
         
        request.onerror = function(e) {
                alert("Unable to add the information.");       
        }         
}

function Read() {
        var objectStore = db.transaction("users").objectStore("users");
        var request = objectStore.get("2");
        request.onerror = function(event) {
          alert("Unable to retrieve data from database!");
        };
        request.onsuccess = function(event) {          
          if(request.result) {
                alert("Name: " + request.result.name + ", Age: " + 
                       request.result.age + ", Email: " + request.result.email);
          } else {
                alert("Bidulata couldn't be found in your database!"); 
          }
        };
}

function ReadAll() {
        var objectStore = db.transaction("users").objectStore("users");  
        var req = objectStore.openCursor();

        req.onsuccess = function(event) {
      db.close();
          var res = event.target.result;
          if (res) {
                alert("Key " + res.key + " is " + res.value.name + ", 
                       Age: " + res.value.age + ", Email: " + res.value.email);
                res.continue();
          }
        }; 

        req.onerror = function (e) {
            console.log("Error Getting: ", e);
        };    
}

function Remove() { 
        var request = db.transaction(["users"], "readwrite").objectStore("users").delete("1");
        request.onsuccess = function(event) {
          alert("Tapas's entry has been removed from your database.");
        };
}
</script>
</head>
 
<body>
<button onclick="Add()">Add record</button>
<button onclick="Remove()">Delete record</button>
<button onclick="Read()">Retrieve single record</button>
<button onclick="ReadAll()">Retrieve all records</button>
</body>
</html>