html5関連APIのWeb Storage

2010.12.27

こんにちは。mashimonatorです。
少し間が空いてしまいましたが、今回はWeb Storageを使用して、
クライアントサイドにデータを保存する簡単なメモアプリのサンプルを作成してみました。
尚、メモの編集部分の動作には、リッチテキスト編集用APIを使用しています。
また、上記サンプルと前回紹介した アプリケーションキャッシュ を組み合わせたもの(demo2)も作成してみました。

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

demo1を見る

demo2を見る

Web Storage

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

データサイズの制限

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

sessionStorage

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

localStorage

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

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

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

Web SQL Database と IndexedDatabase

クライアントサイドにデータを永続的に保存するための仕様として、Web SQL Database や IndexedDatabase というものも存在し、この技術もユーザビリティ向上やサーバ負荷軽減にとても有用なものとして期待できます。
Web Database は、本格的なリレーショナルデータベースであり、SQLを用いてストレージ操作を行うことができるものです。
(*Web SQL Database は2010/11/18にW3Cから正式に廃止が発表されました。)
また、 IndexedDatabase は、キー/バリュー型のストレージである点は Web Storage と同じですが、検索に用いるインデックスを自由に作成することができ、高速で柔軟に値を検索することが可能です。
これらについては、また別の機会に触れたいと思います。

参考サイト:W3C Editor’s Draft | Web Storage

参考サイト:W3C Working Group Note | Web SQL Database

参考サイト:W3C Editor’s Draft | Indexed Database API

一覧へ