indexedDB 在概念上与 HTML5 本地存储有何不同？

Posted 2023-02-19

【中文标题】indexedDB 在概念上与 HTML5 本地存储有何不同？

【英文标题】：How is indexedDB conceptually different from HTML5 local storage?

【发布时间】：2011-08-20 22:28:01

【问题描述】：

indexedDB 和本地存储都是键值存储。是什么 拥有两个键/值存储的优势？ indexedDB是异步的，但是join（最耗时的事情） 是手动的。它们似乎与异步调用在同一线程中运行 被制作了。这怎么不会阻塞 UI？ indexedDB 允许更大的存储。为什么不增加尺寸 html5 商店？ 我在挠头。 indexedDB 的意义何在？

【参考方案1】：

IndexedDB 不像本地存储那样是键值存储。本地存储只存储字符串，因此要将对象放入本地存储通常的方法是JSON.stringify它：

myObject = a: 1, b: 2, c: 3;
localStorage.setItem("uniq", JSON.stringify(myObject));

这很适合使用键 uniq 查找对象，但从本地存储中取回 myObject 属性的唯一方法是 JSON.parse 对象并检查它：

var myStorageObject = JSON.parse(localStorage.getItem("uniq"));
window.alert(myStorageObject.b);

如果您在本地存储中只有一个或几个对象，这很好。但是假设您有一千个对象，所有这些对象都有一个属性b，而您只想对那些b==2 的对象做一些事情。使用本地存储，您必须遍历整个存储并检查每个项目的b，这是非常浪费的处理过程。

使用 IndexedDB，您可以存储 stuff other than strings in the value：“这包括简单类型，例如 DOMString 和 Date 以及 Object 和 Array 实例。”不仅如此，您还可以create indexes 对存储在值中的对象的属性进行操作。因此，使用 IndexedDb，您可以将相同的一千个对象放入其中，但在 b 属性上创建一个索引，并使用它来检索 b==2 所在的对象，而无需扫描存储中的每个对象。

至少是这样的想法。 IndexedDB API 不是很直观。

它们似乎在进行异步调用的同一线程中运行。这怎么不会阻塞 UI？

异步和多线程不是一回事，javascript, as a rule, is not multi-threaded。您在 JS 中进行的任何繁重处理都会阻塞 UI，如果您想尽量减少对 UI 的阻塞，请尝试 Web Workers。

indexedDB 允许更大的存储。为什么不增加 HTML5 商店的大小？

因为如果没有适当的索引，它会变得越来越慢。

【讨论】：

您可能还想查看以下Question 的答案，了解 IndexedDB 如何支持事务而本地存储支持事务。在 Chrome 和 Opera 等浏览器中使用多选项卡/窗口访问本地存储时，如果每个选项卡使用单独的进程/线程，则没有事务支持可能会成为问题。

另外，indexeddb 是网页和在其上运行的服务工作者之间的一种通信模式。服务人员无法访问 localStorage。

indexedDB api肯定不是很直观，但是有Dexie这样的包装库，它让事情变得更容易

@robertc，您说遍历所有对象以找出 b==2 的对象，当我们在 localStorage 中存储的每个项目都有一个关联的键时，为什么需要它？

@Tick20 因为没有得到它所在的对象就无法使用密钥

【参考方案2】：

我看到这篇讨论本地存储与索引数据库和其他可能选项的好文章。

（以下所有值均以毫秒为单位）

https://nolanlawson.com/2015/09/29/indexeddb-websql-localstorage-what-blocks-the-dom/

从文章中总结（完全是作者的观点），

在 Chrome、Firefox 和 Edge 的所有三个中，LocalStorage 在您写入数据时完全阻塞 DOM 2。阻塞比内存中更明显，因为浏览器必须实际刷新到磁盘。 毫不奇怪，由于任何同步代码都是阻塞的，内存中的操作也是阻塞的。 DOM 在长时间运行的插入过程中会阻塞，但除非您处理大量数据，否则您不太可能注意到，因为内存中的操作非常快。

在 Firefox 和 Chrome 中，IndexedDB 在基本键值插入方面都比 LocalStorage 慢，而且它仍然会阻塞 DOM。在 Chrome 中，它也比阻止 DOM 的 WebSQL 慢，但没有那么慢。只有在 Edge 和 Safari 中，IndexedDB 才能在后台运行而不中断 UI，更糟糕的是，这两个浏览器仅部分实现了 IndexedDB 规范。

IndexedDB 在 Web Worker 中运行良好，它以大致相同的速度运行，但不会阻塞 DOM。唯一的例外是 Safari，它不支持在 worker 中使用 IndexedDB，但它仍然不会阻塞 UI。

如果数据简单且最少，则本地内存是理想的选择

【参考方案3】：

添加到 robertc 的 anwser，indexedDB 知道 'ranges'，因此您可以搜索和检索所有以 'ab' 开头并以 abd' 结尾的记录来查找 'abc' 等。

【参考方案4】：

在浏览器的控制台中运行以下命令。它将在 Application > Storage 以及 LocalStorage 和 SessionStorage 中创建一个单独的实体

const request = indexedDB.open("notes");
request.onupgradeneeded = e => 
  alert("upgrade");

request.onsuccess = e => 
  alert("success");

request.onerror = e => 
  alert("error");

您可以使用所有 CRUD 操作来查询此存储，这与其他两个存储的灵活性和功能较差的存储不同。