笔记大全

HTML5 IndexedDB本地储存

更新时间：2023-10-10

IndexedDB是本地Web存储机制的一种，允许浏览器以异步方式存储、检索对象及其属性。IndexedDB适用于需要在Web应用程序中缓存大型数据集的情况。过去，客户端数据库存在的问题是导致性能问题和同步时序问题。现在，通过IndexedDB，开发者可以以异步方式使用“事务”来更新客户端对象存储。本文将介绍HTML5 IndexedDB。

第一段：建立连接和存储数据

IndexedDB是在Web工作器中的JavaScript API。现在，我们来创建一些储存教学视频的简单记录系统。在这个例子中，我们将创建一个包含视频信息的存储库，如下所示：

//打开连接
var IndexedDB = window.IndexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
var openIndexedDB = IndexedDB.open("VideoDatabase", 1.0);

//创建表
openIndexedDB.onupgradeneeded = function () {
  var db = openIndexedDB.result;
  var objectStore = db.createObjectStore("videoTable", { keyPath: "id" });

  objectStore.createIndex("name", "name", { unique: false });
  objectStore.createIndex("descript", "descript", { unique: false });
  objectStore.createIndex("url", "url", { unique: false });

  objectStore.transaction.oncomplete = function (event) {
    var customerObjectStore = db.transaction("videoTable", "readwrite").objectStore("videoTable");
    customerData.forEach(function (customer) {
      customerObjectStore.add(customer);
    });
  };
};

在这个例子中，我们首先使用浏览器的默认支持程序开启打开我们的数据库，通过检测window对象的几个属性来查找合适的打开程序。我们在data库表切换版本时使用onupgradeneeded事件处理程序来创建我们数据表，以及在添加对象时为它们建立一个内部主键id。在事件处理程序完成时，我们使用一个已经开启的事务将一些数据添加到存储库。

第二段：获取和修改数据

现在，我们来了解如何使用IndexDB从存储库中获取和修改数据。

//读取数据
openIndexedDB.onsuccess = function () {
  var db = openIndexedDB.result;
  var transaction = db.transaction(["videoTable"]);
  var objectStore = transaction.objectStore("videoTable");
  var request = objectStore.get(1);
  request.onerror = function (event) {
    console.log("Unable to retrieve data from database!");
  };
  request.onsuccess = function (event) {
    // Do something with the request.result!
  };
};

//更新数据
openIndexedDB.onsuccess = function () {
  var db = openIndexedDB.result;
  var transaction = db.transaction(["videoTable"], "readwrite");
  var objectStore = transaction.objectStore("videoTable");
  var request = objectStore.get(1);
  request.onerror = function (event) {
    console.log("Unable to retrieve data from database!");
  };
  request.onsuccess = function (event) {
    // Get the old value that we want to update
    var data = event.target.result;

    // update the value(s) in the object that you want to change
    data.name = "Cyber Security";
    data.descript = "Information security is the protection of information and systems from unauthorized access, use, disclosure, disruption, modification, or destruction.";
    data.url = "video/security.mp4";

    // Put this updated object back into the database.
    var requestUpdate = objectStore.put(data);
    requestUpdate.onerror = function (event) {
      console.log("Unable to update data");
    };
    requestUpdate.onsuccess = function (event) {
      console.log("Data update successfully");
    };
  };
};

在以上示例中，我们使用了get()方法从存储库中检索值，该方法使用我们之前添加的主键id。在我们得到结果之后，我们可以通过更改对象属性来更新值，然后使用put()方法将更新后的对象放回存储库中。

第三段：删除数据

接下来，我们来了解如何使用IndexDB删除数据。

openIndexedDB.onsuccess = function () {
  var db = openIndexedDB.result;
  var request = db.transaction(["videoTable"], "readwrite")
                .objectStore("videoTable")
                .delete(1);
  request.onsuccess = function(event) {
    console.log("Data delete successfully");
  };
};

在这个示例中，我们使用了delete()方法从存储库中删除了一个已经存在的键（也就是主键id）。

第四段：总结

通过上述的示例，我们可以了解到IndexedDB是本地Web存储机制的一种，适用于需要在Web应用程序中缓存大型数据集的情况。IndexedDB通过创建表、读取数据、更新数据和删除数据等API来管理数据。同步和异步方式都可以使用，这使得它非常适合于需要跨多个异步操作涉及大量数据时的应用程序。此外，IndexedDB可以处理大量结构化数据，使开发人员可以轻松地操作它们，而这常常是使用其他存储机制所不具备的。

c语言编程笔录