乐趣区

关于nosql:如何使用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 对象等)。它应用对象存储在外部保留数据。

提供查找界面

这在其余浏览器存储选项(例如 localStoragesessionStorage)中不可用。

对于不须要继续互联网连贯的 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: 'john.doe@outlook.com',
     firstName: 'John',
     lastName: 'Doe',
   });
   insertUser(db, {
     email: 'ann.doe@gmail.com',
     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 及其益处有一个清晰的意识。

退出移动版