[解決済み] indexedDBはHTML5のローカルストレージと概念的にどう違うのですか？

質問

1. indexedDBとローカルストレージはどちらもキーバリューストアです。何が キー／バリュー・ストアを2つ持つ利点は何ですか？
2. indexedDBは非同期ですが、結合（最も時間のかかること）です。 は手動です。非同期呼び出しと同じスレッドで実行されるようです。 されました。これでどうやってUIをブロックしないのでしょうか？
3. indexedDBはより大きなストアを可能にします。のサイズを大きくしてはどうでしょう？ HTML5ストア？
4. 頭を悩ませています。indexedDBは何のためにあるのか？

どのように解決するのですか？

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を使えば、同じ1000個のオブジェクトを入れながら b プロパティを使用し、それを使って b==2 ストア内のすべてのオブジェクトをスキャンするオーバーヘッドが不要になります。

少なくとも、そういう考え方はありますね。 IndexedDBのAPIはあまり直感的ではありません。

非同期呼び出しが行われたのと同じスレッドで実行されるようです。これでどうやってUIをブロックしないのでしょうか？

非同期とマルチスレッドは別物です。 JavaScriptは、原則としてマルチスレッドではありません。 . JSで重い処理をすると、UIがブロックされます。 ウェブワーカー .

indexedDBはより大きなストアを可能にします。HTML5のストアのサイズを大きくしてはいかがでしょうか？

なぜなら、適切なインデックスを作成しないと、サイズが大きくなるにつれて、どんどん遅くなってしまうからです。