【发布时间】：2011-08-20 22:28:01
【问题描述】：
- indexedDB 和本地存储都是键值存储。是什么 拥有两个键/值存储的优势？
- indexedDB是异步的，但是join（最耗时的事情） 是手动的。它们似乎与异步调用在同一线程中运行 被制作了。这怎么不会阻塞 UI？
- indexedDB 允许更大的存储。为什么不增加尺寸 HTML5 商店？
- 我在挠头。 indexedDB 的意义何在？
【问题讨论】：
标签： javascript html indexeddb
【发布时间】：2011-08-20 22:28:01
【问题描述】：
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 因为没有得到它所在的对象就无法使用密钥
我看到这篇讨论本地存储与索引数据库和其他可能选项的好文章。
（以下所有值均以毫秒为单位）
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。
如果数据简单且最少，则本地内存是理想的选择
【讨论】：
添加到 robertc 的 anwser，indexedDB 知道 'ranges'，因此您可以搜索和检索所有以 'ab' 开头并以 abd' 结尾的记录来查找 'abc' 等。
【讨论】：
在浏览器的控制台中运行以下命令。它将在 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 操作来查询此存储，这与其他两个存储的灵活性和功能较差的存储不同。
【讨论】：