web-dev-qa-db-ja.com

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

  1. IndexedDBとローカルストレージはどちらもキー値ストアです。 2つのキー/値ストアがあることの利点は何ですか？
  2. indexedDBは非同期ですが、結合（最も時間がかかるもの）は手動です。非同期呼び出しが行われたときと同じスレッドで実行されているように見えます。これはどのようにUIをブロックしませんか？
  3. indexedDBでは、より大きなストアを使用できます。 HTML5ストアのサイズを増やしてみませんか？
  4. 私は頭を掻いています。 indexedDBのポイントは何ですか？
javascripthtmlindexeddb
69
Samuel Danielson

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

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

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

少なくともそれは考えです。 IndexedDB APIはあまり直感的ではありません。

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

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

indexedDBでは、より大きなストアを使用できます。 HTML5ストアのサイズを増やしてみませんか？

なぜなら、適切な索引付けを行わないと、取得したサイズが大きくなるほど、処理速度が遅くなるからです。

92
robertc

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

6
Johan

Localstorageとindexeddbとその他の可能なオプションについて議論しているこの良い記事に出くわしました。

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

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

memory comparison

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

  1. Chrome、Firefox、Edgeの3つすべてで、データを書き込んでいる間、LocalStorageはDOMを完全にブロックします。ブロックは、ブラウザーが実際にディスクにフラッシュする必要があるため、インメモリよりもはるかに顕著です。
  2. 当然のことながら、同期コードはすべてブロックされているため、メモリ内の操作もブロックされます。 DOMは長時間実行される挿入中にブロックしますが、大量のデータを処理している場合を除いて、メモリ内の操作は非常に高速であるため、気付かないでしょう。

  3. FirefoxとChromeの両方で、基本的なKey-Valueの挿入に関して、IndexedDBはLocalStorageよりも遅く、それでもDOMをブロックします。 Chromeでは、DOMをブロックするWebSQLよりも低速ですが、それほどではありません。 EdgeとSafariでのみ、IndexedDBはUIを中断することなくバックグラウンドで実行できます。さらに、これらは、IndexedDB仕様を部分的にしか実装していない2つのブラウザーです。

  4. IndexedDBは、ほぼ同じ速度で実行されますが、DOMをブロックすることなく、Webワーカーでうまく機能します。唯一の例外はSafariです。これはワーカー内でIndexedDBをサポートしていませんが、UIをブロックしません。

  5. ローカルメモリは、データがシンプルで最小限の場合に理想的です

3
Amruta-Pani

ブラウザのコンソールで以下を実行します。 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操作でこのストレージをクエリできます。

0
Vinit Khandelwal