ローカル デバイスのストレージとクラウドベースのサーバー ストレージの両方に対して、適切なストレージ メカニズムを選択することが重要です。優れたストレージ エンジンは、情報を確実に保存し、帯域幅を減らし、応答性を向上させます。適切なストレージ キャッシュ戦略は、オフライン モバイルウェブ エクスペリエンスを実現するための核となる構成要素です。
この記事では、ストレージ API とサービスを評価するための基礎を簡単に説明します。その後、比較表と一般的なガイダンスについて説明します。近い将来、選択したストレージ トピックをより深く理解するためのリソースを追加する予定です。
ストレージの分類
まず、ウェブアプリのデータ ストレージを分析できる項目について理解しましょう。後ほど、このフレームワークを使用して、ウェブ デベロッパーが使用できる多くのストレージ オプションを列挙、評価します。
データモデル
データ単位の格納モデルによってデータの内部編成方法が決まり、これはストレージと取得リクエストの使いやすさ、費用、パフォーマンスに影響します。
構造化: SQL ベースのデータベース管理システムで一般的であるように、事前定義されたフィールドを持つテーブルに格納されたデータは、すべてのクエリタイプを事前に把握できない可能性がある柔軟で動的なクエリに適しています。ブラウザ内で利用できる構造化データストアの代表的な例として、IndexedDB があります。
Key-Value: Key-Value データストアと関連する NoSQL データベースは、一意のキーでインデックス付けされた非構造化データを保存および取得します。Key-Value データストアは、インデックス付きの不透明なデータに常時アクセスできるという点でハッシュ テーブルに似ています。Key-Value データストアの代表的な例として、ブラウザの Cache API とサーバー上の Apache Cassandra があります。
バイト ストリーム: このシンプルなモデルでは、データを可変長の不透明なバイト文字列として格納し、内部組織をアプリケーション レイヤに任せます。このモデルは、ファイル システムやその他の階層構造のデータ blob に特に適しています。バイト ストリーム データストアの代表的な例としては、ファイル システムやクラウド ストレージ サービスがあります。
永続性
ウェブアプリのストレージ方法は、データを永続化するスコープに応じて分析できます。
セッション永続性: このカテゴリのデータは、1 つのウェブ セッションまたはブラウザタブがアクティブである限り保持されます。セッション永続性を持つストレージ メカニズムの例として、Session Storage API があります。
デバイスの永続性: このカテゴリのデータは、特定のデバイス内のセッションやブラウザタブ、ウィンドウをまたいで保持されます。デバイス永続性を持つストレージ メカニズムの例として、Cache API があります。
グローバルな永続性: このカテゴリのデータは、セッションやデバイスをまたいで保持されます。したがって、これは最も堅牢なデータ永続性の形式です。グローバルな永続性を持つストレージ メカニズムの例として、Google Cloud Storage があります。
対応ブラウザ
デベロッパーは、問題となっているドメインに最も適した API を選択する必要があります。ただし、標準化され確立された API は、カスタム インターフェースや独自インターフェースよりも寿命が長く、サポートが広くなる傾向があるため、考慮する必要があります。また、ナレッジベースが拡充され、デベロッパー エコシステムも充実します。
トランザクション
多くの場合、関連する一連のストレージ オペレーションがアトミックに成功または失敗することが重要になります。従来、データベース管理システムは、トランザクション モデルを使用してこの機能をサポートしてきました。トランザクション モデルでは、関連する更新を任意の単位にグループ化できます。必ずしも必要というわけではありませんが、問題領域によっては便利な機能であり、不可欠な場合もあります。
同期 / 非同期
ストレージ API や取得リクエストは、リクエストが完了するまで現在アクティブなスレッドをブロックするという点で、同期型の API があります。これは、ストレージ リクエストが UI とメインスレッドを共有するウェブブラウザでは特に面倒です。効率とパフォーマンス上の理由から、非同期ストレージ API をおすすめします。
Chrome DevTools でのストレージのデバッグ
Chrome DevTools を使用して任意のウェブ ストレージ API を検査およびデバッグする方法については、次のドキュメントをご覧ください。ここに記載されていない API は、DevTools でサポートされていないか、適用できません。
複数のストレージ API を使用している場合は、DevTools の [ストレージの消去] 機能を確認してください。この機能を使用すると、ボタンを 1 回クリックするだけで複数のストアを削除できます。詳細については、Service Worker、ストレージ、データベース、キャッシュの消去をご覧ください。
次のステップ...
ストレージ メカニズムに関する関連する考え方を確認し、現在利用可能な最も一般的な API とサービスを比較しました。次に、関心のあるトピックをより深く掘り下げるために、コンテンツをさらに追加する予定です。