indexedDBはHTML5ローカルストレージと概念的にどのように異なりますか？

Question 1

indexedDBとローカルストレージはどちらもKeyValueストアです。2つのKey / Valueストアを持つことの利点は何ですか？
indexedDBは非同期ですが、結合（最も時間のかかるもの）は手動です。それらは、非同期呼び出しが行われたのと同じスレッドで実行されているように見えます。これはどのようにUIをブロックしませんか？
indexedDBはより大きなストアを可能にします。HTML5ストアのサイズを大きくしてみませんか？
頭をかいてます。indexedDBのポイントは何ですか？

Question 2

IndexedDBは、ローカルストレージと同じようにKey-Valueストアではありません。ローカルストレージは文字列を格納するだけなので、オブジェクトをローカルストレージに配置するには、通常のアプローチは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);

ローカルストレージにオブジェクトが1つまたは少数しかない場合は、これで問題ありません。しかし、1000個のオブジェクトがあり、そのすべてにプロパティがあり、それらのオブジェクトbだけで何かをしたいとしますb==2。ローカルストレージを使用すると、ストア全体をループしてb各アイテムをチェックする必要があり、これは多くの無駄な処理です。

IndexedDBを使用すると、文字列以外のものを値に格納できます。「これには、DOMStringやDateなどの単純な型、およびObjectインスタンスとArrayインスタンスが含まれます。」それだけでなく、値に格納したオブジェクトのプロパティにインデックスを作成できます。したがって、IndexedDbを使用すると、同じ数千のオブジェクトをその中に配置できますが、bプロパティにインデックスを作成し、それを使用してb==2、ストア内のすべてのオブジェクトをスキャンするオーバーヘッドなしでオブジェクトを取得できます。

少なくともそれがアイデアです。IndexedDBAPIはあまり直感的ではありません。

それらは、非同期呼び出しが行われたのと同じスレッドで実行されているように見えます。これはどのようにUIをブロックしませんか？

非同期はマルチスレッドと同じではありません。JavaScriptは原則としてマルチスレッドではありません。JSで重い処理を行うと、UIがブロックされます。UIのブロックを最小限に抑えたい場合は、Webワーカーを試してください。

indexedDBはより大きなストアを可能にします。HTML5ストアのサイズを大きくしてみませんか？

なぜなら、適切なインデックスがないと、大きくなるほど遅くなるからです。

Question 3

localstorageとindexeddb、およびその他の可能なオプションについて説明しているこの良い記事に出くわしました。

（以下の値はすべてミリ秒単位です）

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

記事（完全に著者の見解）から要約すると、

Chrome、Firefox、Edgeの3つすべてで、LocalStorageはデータの書き込み中にDOMを完全にブロックします2。ブラウザは実際にディスクにフラッシュする必要があるため、ブロックはインメモリよりもはるかに目立ちます。
当然のことながら、同期コードがブロックしているため、メモリ内操作もブロックしています。長時間実行される挿入中にDOMはブロックされますが、大量のデータを処理しない限り、メモリ内操作は非常に高速であるため、気付くことはほとんどありません。
FirefoxとChromeの両方で、IndexedDBは基本的なキー値の挿入に関してLocalStorageよりも低速であり、それでもDOMをブロックします。Chromeでは、DOMをブロックするWebSQLよりも低速ですが、それほどではありません。EdgeとSafariでのみ、IndexedDBはUIを中断することなくバックグラウンドで実行できます。さらに悪いことに、これらはIndexedDB仕様を部分的にしか実装していない2つのブラウザーです。
IndexedDBは、DOMをブロックすることなく、ほぼ同じ速度で実行されるWebワーカーでうまく機能します。唯一の例外はSafariです。Safariはワーカー内のIndexedDBをサポートしていませんが、それでもUIをブロックしません。
ローカルメモリは、データが単純で最小限の場合に理想的です

Question 4

robertcの回答に加えて、indexedDBは「範囲」を認識しているため、「ab」で始まり「abd」で終わるすべてのレコードを検索して取得し、「abc」などを見つけることができます。

Question 5

ブラウザのコンソールで以下を実行します。LocalStorageとSessionStorageと一緒にApplication> Storageに別のエンティティを作成します

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

柔軟性と機能が劣る他の2つのストレージとは異なり、このストレージはすべてのCRUD操作でクエリできます。