IndexedDB 是个好帮手，你的 Web 开发必备神器！

2023-12-27 17:49:01

IndexedDB：为您的 Web 应用程序提供持久化存储

了解 IndexedDB

IndexedDB 是一种强大的 Web API，它允许 Web 应用程序在客户端本地数据库中存储数据。与传统数据库不同，IndexedDB 在用户的浏览器中存储数据，即使关闭浏览器也不会丢失。这意味着您的应用程序可以随时随地访问关键数据，即使用户处于离线状态。

IndexedDB 采用键值对存储系统，使数据访问极其高效。它还提供强大的查询功能，让您能够轻松地检索所需的数据。

IndexedDB 的优点

持久化存储： 数据安全地存储在用户浏览器中，即使关闭浏览器也不会丢失。
离线可用： 即使没有网络连接，应用程序仍然可以访问数据。
强大查询： IndexedDB 提供复杂的查询选项，简化数据检索。
高效访问： 键值对存储使数据访问快速且高效。

IndexedDB 的局限性

有限存储： IndexedDB 的存储空间有限，通常为几兆字节到几十兆字节。
安全问题： IndexedDB 中的数据是未加密的，存在潜在的安全风险。

使用 IndexedDB

创建数据库

要开始使用 IndexedDB，您需要创建一个数据库。这是一个简单的过程，如下所示：

var request = indexedDB.open("myDatabase", 1);

request.onsuccess = function(event) {
  var db = event.target.result;

  // 创建对象存储
  var objectStore = db.createObjectStore("myObjectStore", { keyPath: "id" });
};

request.onerror = function(event) {
  alert("数据库打开失败：" + event.target.errorCode);
};

读取数据

要读取数据，请使用以下代码：

var request = objectStore.get(1);

request.onsuccess = function(event) {
  var data = event.target.result;

  // 显示数据
  alert("数据读取成功：" + data.name);
};

request.onerror = function(event) {
  alert("数据读取失败：" + event.target.errorCode);
};

更新数据

更新数据也一样简单：

var request = objectStore.put({ id: 1, name: "John Smith" });

request.onsuccess = function(event) {
  alert("数据更新成功！");
};

request.onerror = function(event) {
  alert("数据更新失败：" + event.target.errorCode);
};

删除数据

要删除数据，请使用以下代码：

var request = objectStore.delete(1);

request.onsuccess = function(event) {
  alert("数据删除成功！");
};

request.onerror = function(event) {
  alert("数据删除失败：" + event.target.errorCode);
};