100
  1. indexedDB とローカル ストレージはどちらもキー値ストアです。2 つのキー/バリュー ストアを持つ利点は何ですか?
  2. indexedDB は非同期ですが、結合 (最も時間がかかる作業) は手動です。非同期呼び出しが行われたのと同じスレッドで実行されているように見えます。これはどのようにUIをブロックしませんか?
  3. indexedDB では、より大きなストアが可能です。HTML5 ストアのサイズを大きくしてみませんか?
  4. 頭をかいてます。indexedDB のポイントは何ですか?
4

4 に答える 4

140

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ストアのサイズを大きくしてみませんか？

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

于 2011-05-07T23:54:38.463 に答える
6

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

于 2011-07-01T07:00:41.743 に答える
0

ブラウザのコンソールで次を実行します。Application > Storage に、LocalStorage および SessionStorage と並んで別のエンティティが作成されます。

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

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

于 2019-07-21T07:41:41.897 に答える