如何使用IndexedDB —浏览器上的NoSQL数据库

深入研究 IndexedDB API 及其在实践中的用法。

你是否听说过浏览器上的 NoSQL 数据库？

IndexedDB 是大型 NoSQL 存储系统。它使你几乎可以将任何内容存储在用户的浏览器中。除了通常的搜索，获取和放置操作外，IndexedDB 还支持事务。

你可以在下面找到 IndexedDB 的示例。

在本文中，我们将重点介绍以下内容。

• 为什么我们需要 IndexedDB？
• 我们如何在我们的应用程序中使用 IndexedDB？
• IndexedDB 的功能
• IndexedDB 的局限性
• IndexedDB 是否适合你的应用程序？

为什么我们需要 IndexedDB？

IndexedDB 被认为比 localStorage 更强大！

你知道背后的原因吗？让我们找出答案。

可以存储比 localStorage 大得多的数据量

没有像 localStorage 这样的特殊限制（介于 2.5MB 和 10MB 之间）。最大限制取决于浏览器和磁盘空间。例如，基于 Chrome 和 Chromium 的浏览器最多允许 80％的磁盘空间。如果你有 100GB，则 IndexedDB 最多可以使用 80GB 的空间，单个 origin 最多可以使用 60GB。Firefox 允许每个 origin 最多 2GB，而 Safari 允许每个来源最多 1GB。

可以存储基于{ key: value }对的任何类型的值

存储不同数据类型的灵活性更高。这不仅意味着字符串，而且还意味着二进制数据（ArrayBuffer 对象，Blob 对象等）。它使用对象存储在内部保存数据。

提供查找界面

这在其他浏览器存储选项（例如 localStorage 和 sessionStorage ）中不可用。

对于不需要持续互联网连接的 Web 应用程序很有用

IndexedDB 对于联机和脱机工作的应用程序都非常有用，例如，它可以用于渐进式 Web 应用程序（PWA）中的客户端存储。

应用状态可以存储

通过为经常使用的用户存储应用程序状态，可以大大提高应用程序的性能。稍后，应用程序可以与后端服务器同步，并通过延迟加载来更新应用程序。

我们来看看 IndexedDB 的结构，它可以存储多个数据库。

IndexedDB 的结构

我们如何在我们的应用程序中使用 IndexedDB？

在以下部分中，我们将研究如何使用 IndexedDB 引导应用程序。

1. 使用“window.indexedDB”打开数据库连接

const openingRequest = indexedDB.open("UserDB", 1);

在这里 UserDB 是数据库名称， 1 是数据库的版本。这将返回一个对象，该对象是 IDBOpenDBRequest 接口的实例。

2. 创建对象存储

打开数据库连接后，将触发 onupgradeneeded 事件，可用于创建对象存储。

// 创建UserDetails对象存储库和索引
request.onupgradeneeded = (event) => {
  let db = event.target.result;

  // 创建UserDetails对象存储
  // 具有自动递增ID
  let store = db.createObjectStore("UserDetails", {
    autoIncrement: true,
  });

  // 在NIC属性上创建索引
  let index = store.createIndex("nic", "nic", {
    unique: true,
  });
};

3. 将数据插入对象存储

一旦打开了与数据库的连接，就可以在 onsuccess 事件处理程序中管理数据。插入数据发生在 4 个步骤中。

function insertUser(db, user) {
  // 创建一个新事物
  const txn = db.transaction("User", "readwrite");

  // 获取UserDetails对象存储
  const store = txn.objectStore("UserDetails");
  // 插入新记录
  let query = store.put(user);

  // 处理成功用例
  query.onsuccess = function(event) {
    console.log(event);
  };

  // 处理失败用例
  query.onerror = function(event) {
    console.log(event.target.errorCode);
  };

  // 事务完成后关闭数据库
  txn.oncomplete = function() {
    db.close();
  };
}

一旦创建了插入函数，请求的 onsuccess 事件处理程序就可以用来插入更多的记录。

request.onsuccess = (event) => {
  const db = event.target.result;
  insertUser(db, {
    email: "[email protected]",
    firstName: "John",
    lastName: "Doe",
  });
  insertUser(db, {
    email: "[email protected]",
    firstName: "Ann",
    lastName: "Doe",
  });
};

在 IndexedDB 上可以执行许多操作，其中一些如下：

• 通过 key 从对象存储中读取/搜索数据
• 按 index 从对象存储中读取/搜索数据
• 更新记录数据
• 删除记录
• 从数据库的先前版本等进行迁移

IndexedDB 的功能

IndexedDB 提供了许多特殊的功能，这是其他浏览器存储无法实现的，下面简要说明一些功能。

具有异步 API

这使执行昂贵的操作而不会阻塞 UI 线程，并为用户提供了更好的体验。

支持事务以确保可靠性

如果一个步骤失败，则事务将被取消，数据库将回滚到先前的状态。

支持版本控制

你可以在创建数据库时对其进行版本控制，并在需要时对其进行升级。在 IndexedDB 中也可以从旧版本迁移到新版本。

私有域

数据库是一个域的私有数据库，因此任何其他网站都不能访问其他网站的 IndexedDB 存储。这也就是所谓的 同源策略 。

IndexedDB 的局限性

到目前为止，IndexedDB 似乎很有希望用于客户端存储。然而，有一些值得注意的限制。

• 即使有现代浏览器的支持，但 IE 等浏览器并没有完全支持。
  
• Firefox 在私人浏览模式下完全禁用 IndexedDB - 这可能导致你的应用程序在通过隐身窗口访问时发生故障。

IndexedDB 是否适合你的应用程序？

基于 IndexedDB 提供的许多功能，这个百万美元问题的答案可能是 Yes！然而，在下结论之前，请问自己以下问题。

• 你的应用程序需要脱机访问吗？
• 你是否需要在客户端存储大量数据？
• 你是否需要快速查找/搜索大量数据中的数据？
• 你的应用程序是否使用 IndexedDB 支持的浏览器访问客户端存储？
• 你是否需要存储各种类型的数据，包括 JavaScript 对象？
• 从客户端存储进行写入/读取是否需要非阻塞？

如果对上述所有问题的回答均为“是”，则 IndexedDB 是你的最佳选择。但如果不需要这样的功能，你不妨选择像 localStorage 这样的存储方法，因为它提供了广泛的浏览器应用，并且具有易于使用的 API。

总结

当我们考虑所有的客户端存储机制时，IndexedDB 是一个明显的赢家。我们来看看不同客户端存储方式的总结比较。

Cookies Web Storage IndexedDB 存储 具有键值、数据值对的小型查询表 只有字符
串键、值存储 对象存储，可以存储任何类型的数据，包括对象 容量 4KB 5MB-25MB 50MB 以上 索引 不支持 不支持 支持 API 调用类型 同步 同步 异步 操作性能 直接执行 直接执行 事务 学习曲线 低 低 高

希望你对 IndexedDB 及其好处有一个清晰的认识。

翻译自： bitsrc.io ，作者：Viduni Wickramarachchi