web-dev-qa-db-ja.com

localStorageはindexedDBとどう違うのですか？

localStorageとindexedDBは、HTML5のデータのオフラインストレージに使用されます。それらの主な違いは何ですか？どの状況でどの1つが望ましいですか？

databasehtml5offline
119
user52009

表面的には2つのテクノロジーは直接比較できるように思えるかもしれませんが、少し時間を費やしてみると、そうでないことにすぐに気付くでしょう。これらはクライアント側のストレージという同様の目標を達成するように設計されていますが、大幅に異なる観点から当面のタスクに取り組み、異なる量のデータで最適に機能します。

localStorage、より正確には Web Storage は、より少量のデータ用に設計されました。それは本質的にstrings only key-value storageで、単純化されたsynchronous API。その最後の部分が重要です。仕様には非同期のWebストレージを禁止するものは何もありませんが、現在すべての実装は同期しています（つまり、リクエストをブロックしています）。単純なキー（大量のデータ用の値のストレージ）を使用することを気にしていなかったとしても、クライアントはアプリケーションのロードを永久に待つことを気にかけます。

indexedDB は、一方で、非常に大量のデータを処理するように設計されています。まず、理論的には、同期APIと非同期APIの両方を提供します。ただし実際には、現在のすべての実装は非同期であり、リクエストによってユーザーインターフェイスの読み込みがブロックされることはありません。さらに、名前が示すように、indexedDBは indexes を提供します。データベースで基本的なクエリを実行し、特定の キー範囲 でキーを検索することでレコードをフェッチできます。 indexedDBは transactions もサポートし、単純な型（日付など）を提供します。

この時点で、indexedDBはこれまでのすべての状況で優れたソリューションのように思えるかもしれません。ただし、そのすべての機能にはペナルティがあります。Webストレージと比較すると、そのAPIは非常に複雑です。 indexedDBは、データベースの概念についての一般的な知識があることを前提としていますが、Web Storageを使用すればすぐに利用できます。Cookieを使用したことがある場合は、Web Storageの使用に問題はありません。また、一般に、Web Storageとまったく同じ結果を実現するには、indexedDBにさらに多くのコードを記述する必要があります（コードが増える=バグが増える）。さらに、Webストレージをサポートしていないブラウザー用にWebストレージをエミュレートすることは比較的簡単です。 indexedDBを使用すると、タスクはその時間の価値がなくなります。最後に、indexedDBに飛び込む前に、まず Quota API を確認する必要があります。

結局のところ、アプリケーションでWeb StorageまたはindexedDB、あるいはその両方を使用するかどうかは、完全にあなた次第です。 Web Storageの適切な使用例は、ユーザー名などの単純なセッションデータを保存し、実際のデータベースへのリクエストを保存することです。一方、indexedDBの追加機能は、アプリケーションがオフラインで動作するために必要なすべてのデータを格納するのに役立ちます。

129
yannis

@yannisの回答は優れています。いくつか追加したいだけです。

  1. Service Workersなどのいくつかの状況では、ブロッキングコードを使用できないため、localStorageを使用できず、indexedDBなどを使用する必要があります。

  2. IndexedDBのAPIは複雑で面倒です（私は「恐ろしい」YMMVと言うまで行きます）。 APIを簡略化するための「ラッパー」ライブラリーがいくつかあります。私は（強く）、それらを確認することをお勧めします。

10
user949300

私にとって、blobsをIndexedDBに格納できるのに、localStorageには文字列のみを格納できることがわかりました。つまり、IndexdDBは、画像、オーディオ、ビデオなどのバイナリデータに適しています。はい、base64のlocalStorageに画像を保存できますが、BLOBはデコードする必要がないため、小さくて高速になります。

[〜＃〜] mdn [〜＃〜] からの引用：

The keys and the values are always strings.

IndexedDBについて ：

Any objects supported by the structured clone algorithm can be stored:  
All primitive types However not symbols
Boolean object   
String object    
Date     
RegExp  The lastIndex field is not preserved.
Blob     
File     
FileList     
ArrayBuffer  
ArrayBufferView This basically means all typed arrays like Int32Array etc.
ImageData    
Array    
Object  This just includes plain objects (e.g. from object literals)
Map  
Set
3
Vitaly Zdanevich