localStorageとindexedDBの違いは何ですか？

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

表面的には、2つのテクノロジーは直接比較できるように見えますが、少し時間を費やせば、そうではないことにすぐに気付くでしょう。クライアント側のストレージという同様の目標を達成するように設計されていますが、目前のタスクに大きく異なる視点からアプローチし、さまざまな量のデータで最適に動作します。

localStorage、より正確にはWeb Storageは、少量のデータ用に設計されました。基本的には文字列のみのキーと値のストレージであり、単純な同期 APIを備えています。その最後の部分が重要です。仕様には非同期DOMストレージを禁止するものはありませんが、現在、すべての実装は同期しています（つまり、要求をブロックしています）。単純なキー-大量のデータの値ストレージを使用することを気にしなくても、クライアントはアプリケーションがロードされるのを永遠に待つことを気にします。

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

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

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

@yannisの回答は素晴らしいです。いくつか追加したいだけです。

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

2. indexedDBのAPIは複雑で退屈です（「恐ろしい」YMMVと言ってもいいでしょう）。APIを簡素化するための「ラッパー」ライブラリがいくつかあります。それらを確認することを強くお勧めします。

私にとっては、blobをIndexedDBに保存できるのに、localStorageには文字列のみを保存できることがわかりました。IndexdDBは、画像、音声、ビデオなどのバイナリデータに適していることを意味します。はい、localStorageのbase64に画像を保存できますが、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