HTML5 Rocks

HTML5 Rocks

HTML5 機能

ストレージ

ウェブ デベロッパーがユーザーに関するデータを保存しようとする場合、これまではサーバーにアップロードするのが普通でした。しかし、HTML5 ではこの概念が変わります。現在ではさまざまな技術によってアプリのデータをクライアント端末に保存することができます。さらにデータをサーバーと同期することも、クライアントのみで保存することも、デベロッパーの思いのままです。

クライアントサイド ストレージを使用する理由は複数あります。1 つ目の理由は、ユーザーがオフラインのときでもアプリを実行できることです。ネットワークに再度接続した際にデータを同期することもできます。2 つ目の理由は、パフォーマンスを改善できることです。ユーザーがクリックしてサイトにアクセスしたときに、再ダウンロードに時間をかけることなく大量のデータを表示できます。3 つ目の理由は、これがサーバー基盤を必要としないプログラミングしやすいモデルであることです。ただし、データは脆弱性がより高く、ユーザーは複数のクライアントからデータにアクセスできないため、重要度が高くないデータにしか使用できません(「クラウド内」にも存在するようなデータのキャッシュに特に適しています)。クライアントサイド ストレージはオフライン技術の 1 コンポーネントです。オフライン技術については、「オフライン」の意味と「オフライン」に注目する理由をご覧ください。

新機能

Offline Technologies

  • ウェブ ストレージ(リンク先は英語)は、localStorage["name"] = username; のような Key-Value マッピングを提供します。ただし、現在の実装では文字列から文字列へのマッピングしかサポートされていないため、その他のデータ構造はシリアライズ/デシリアライズする必要があります。これには JSON.stringify()JSON.parse() を使用できます。
  • Web SQL Database(リンク先は英語): 構造化 SQL リレーショナル データベースのすべての機能(と取り組み)を提供します。
  • Indexed Database(リンク先は英語): Web Storage と Web SQL Database の間に位置付けられるものです。Web Storage のように単純な Key-Value マッピングを行いつつ、リレーショナル データベースのようなインデックスもサポートするため、特定フィールドに一致するオブジェクトをすばやく検索できます。ストア内のオブジェクト 1 つ 1 つに手動で同じことを繰り返す必要はありません。
  • File Access(リンク先は英語)は、JavaScript でファイルの内容を読み取るための API です。ユーザーが input 要素の「file」としてファイル セットを追加している場合、この API を使ってファイルの内容を読み取ったり URL として参照したりできます。たとえばユーザーが画像ファイルを指定した場合は、この API を使って画像を表示できます。ファイルの書き込み機能についても、現在提案が進行中です。

クライアントサイド ストレージ手法について詳しくは、クライアントサイド ストレージをご覧ください。ここでは各種手法を比較し、コード デモも記載しています。

デモ

HTML5 Demos: Storage
Synchronization with localStorage
Timer demo

活用例

Mobile Gmail
MugTug Darkroom

リソース