[HTML5と関連API] Web Storageのサンプル

Web Storage を使用して、クライアントサイドにデータを保存する簡単なメモアプリのサンプルを作成してみた。
尚、メモの編集部分の動作には、リッチテキスト編集用APIを使用している。

また、上記サンプルと前回紹介したアプリケーションキャッシュを組み合わせたVerも作成した。

2010年10月時点で、IE8.0、Firefox3.6、Safari5.0、Chrome6.0にて動作確認
あまり作りこんでいないので、Firefoxではリッチテキスト編集用APIの動作が少しおかしくなることがある

Web Storage

Web Storage とは、クライアントサイド（ブラウザ側）にデータを永続的に保存するための仕様で、オフラインWebアプリケーションの観点からも、これからのWebアプリケーションの中核を担う重要な技術だといえる。
ローカル上にデータを永続的に保存できるため、例えば、フォームに入力途中の内容を保存しておくことで、サーバサイドにデータを保存する前に何かのトラブルでブラウザが閉じられてしまっても、同じページをまた開けば編集内容が残っているようにするなどの動作が簡単に実現できる。
これまでは、DEMO1 や DEMO2 のようなWebアプリケーションを構築するためには、サーバ上のDBにメモされた情報を保存することが必要だったが、上記のサンプルではメモした情報の保持に一切のサーバサイドの処理を使用していない。
Web Storage はキー/バリュー型の単純なストレージで、クライアントサイドにデータを保持するという意味ではクッキーと似ているが、大きく異なる点がいくつか存在する。（それ故に新しい仕様として標準化が進められているのだが...）

データサイズの制限

Web Storage とクッキーで主に異なる点としてまず挙げられるのが、Web Storage は保存できるデータサイズに制限が無いという点だ。（実際はユーザが使用しているPCのスペックやブラウザ毎に違いが発生するだろう）
クッキーには各ドメインが使用できる容量に約4KBという制限があったが、それに対して、Web Storage は現段階の実装レベルでも、各ブラウザで大体3MBくらいは保存可能である。

sessionStorage

もうひとつの大きな違いは、異なるウィンドウで複数のトランザクションを同時に実行することができるという点だ。これは、sessionStorage　というストレージを利用することで実現される動作で、これによって、セッション・ストレージにデータを保存することができ、保存したデータにはそのウィンドウで開かれている同じサイトのどんなページからでもアクセスすることができるようになる。
sessionStorage　はブラウザーを開いている間の一時的なデータの保存に使用する。

localStorage

Web Storage によって提供されるストレージにはもうひとつ localStorage がある。
こちらは、複数のウィンドウをまたがり、且つ、カレントのセッションが終了しても存続するストレージを想定したもので、ユーザーが編集したドキュメントを丸ごと保存したい場合や、何メガバイトものデータを蓄積したい場合（例えばメールボックスなど）に使用する。

オフラインWebアプリケーションへの利用

これらの技術と前回紹介したアプリケーションキャッシュを組み合わせることで、オフラインWebアプリケーションを作成することが可能となる。
アプリケーションキャッシュにより、Webアプリケーションの動作に必要なリソースを全てローカルにキャッシュし、さらに、Web Storage を使用してアプリケーション上でのデータ保持を行うことにより、ユーザは完全にオフラインとオンラインの差を感じることなくWebアプリケーションを使用することが可能となる。
DEMO3 は、オフライン環境でもひとつのアプリケーションとして（デスクトップアプリケーションのように）動作するはずだ。

Web Database

クライアントサイドにデータを永続的に保存するための仕様として、Web Database というものも存在し、この技術もユーザビリティ向上やサーバ負荷軽減にとても有用なものとして期待できる。
Web Storage との違いは、本格的なリレーショナルデータベースであり、SQLを用いてストレージ操作を行うことができるという点だ。これについては、また別の機会に触れたい。

トラックバックURL

http://mashimonator.weblike.jp/mt/mt-tb.cgi/156