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

Question

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

Answer 1

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

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，您可以存储值中字符串以外的内容：“这包括简单类型，例如 DOMString 和 Date 以及 Object 和 Array 实例。”不仅如此，您还可以在您要查找的对象的属性上创建索引存储在值中。因此，使用 IndexedDb，您可以将同样的一千个对象放入其中，但在 b 属性上创建索引，并使用它来检索 b==2 处的对象，而无需额外开销扫描商店中的每件物品。

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

它们似乎在进行异步调用时在同一线程中运行。这将如何不阻塞 UI？

异步与多线程不同，JavaScript 通常不是多线程的。在 JS 中进行的任何繁重处理都会阻塞 UI，如果您想最大程度地减少对 UI 的阻塞，请尝试 网络工作者。

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

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

Answer 2

我发现这篇好文章讨论了 localstorage 与 indexeddb 以及其他可能的选项。

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

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

< /a>

总结一下这篇文章（全部是作者的观点），

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

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

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

5. 如果数据简单且最小，本地内存是理想的

Answer 3

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

Answer 4

在浏览器控制台中运行以下命令。它将在“应用程序”>“应用程序”中创建一个单独的实体。与 LocalStorage 和 SessionStorage 一起存储

const request = indexedDB.open("notes");
request.onupgradeneeded = e => {
  alert("upgrade");
}
request.onsuccess = e => {
  alert("success");
}
request.onerror = e => {
  alert("error");
}

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