HTML5ファミリー： Web Storage

2010/08/18 by yuki

この記事は5/27に掲載された「The HTML5 Family: Web Storage」を訳したものです

HTML5 このシリーズでは次世代のWeb技術について解説すると同時に、それらがExt JSのようなAJAXフレームワークにどのようにフィットしていくのか説明していく予定です。最初の記事ではHTML5の概要（そしてHTML5という言葉の使われ方）について書きました。今回は、比較的簡単で小さな機能について深堀りしてみたいと思います：Web Storage。

HTML5で定義されている2つの新しいAPIはブラウザ側にデータを格納する機能を与えます。ブラウザ側でのデータ格納機能そのものは新しいものではありませんークッキーは1994年頃から存在しますし、クライアントとサーバー間でやり取りする小さなデータの保管先として長く使われてきました。ただ、クッキーにはいくつかの問題があります：

サイズが4キロバイト以下に制限されている
ドメインあたりに許可するクッキーの数がブラウザにより異なるー比較的新しいブラウザであれば300個ほどは許容するはずですが、IE7などの古いブラウザでは遥かに少ない数になります。
全てのリクエストにおいてクッキーはサーバー側に送信されてしまいます。現在の通信環境の多くは帯域が非対称であり、アップロード速度はダウンロードのそれより遥かに遅くなっています。したがって、小さなクッキーが積み重なり、それが通信の遅延を引き起こす事になることがあります。

こういった状況を改善するための試みも、これまでにいくつか存在しました。マイクロソフトは既にIE5の時点においてuserDataというものを提案していましたが、他のブラウザに支持を得られなかった事や使いにくさが影響したのか、全く注目されませんでした。Googleも暫定的なソリューションとしてGearsプロジェクトの中でSQLiteベースのブラウザデータベースを提案しましたが、これも標準にはならず、最後はHTML5をサポートするためプロジェクトそのものが停止されました。

The HTML5 Way

Web Storage

localStorage +

sessionStorage

HTML5ではデータを保管するための新たなオブジェクトが2つ用意されています：localStorageとsessionStorageです。この2つをまとめてWeb Storageと呼んでいます。2つのオブジェクトのAPIは全く同じなのですが、データの存在期間が異なっています。localStorageに保管されたデータはセッションをまたいでも、ウィンドウを閉じて再び開いても、あるいはブラウザやコンピューターを再起動しても失われる事はありません。

sessionStorageはより一時的なものですーデータはユーザーが1つのブラウザウィンドウの中でページ遷移をしている間は失われませんが、ウィンドウが閉じられた瞬間に消えてなくなります。sessionStorageに格納されたデータは別のウィンドウとは共有されませんが、sessionStorageを持つウィンドウが新たなウィンドウを開いた場合にはsessionStorageのデータは、その新しいウィンドウにコピーされます。

オブジェクトに格納できるデータのサイズについてはブラウザの仕様に依存しています - W3Cでは初期値としてドメインあたり5メガバイトを推奨していますが、その制限が任意のものにならざるを得ない事も認識されています。現時点においては、ブラウザ毎にこの制限の処理方法は異なっていますー例えばiPhoneでは10メガバイトまで上限を増やすかどうかユーザーに確認してきます。しばらくは5メガバイト以上のデータをWeb Storageに保管することは危険だと考えた方が良さそうです。

現在Web Storageは最新のブラウザであれば大体サポートされていますが、sessionStorageとlocalStorageオブジェクトのサポートについてはまだブラウザにより異なっています。localStorageはChrome 5、Firefox 3.6、 Safari 4、 Opera 10.5、そしてIE8でサポートされていますが、sessionStorageは古いChromeではサポートされていませんが、古いFirefoxではサポートされています。これから開発するアプリケーションでこれらのオブジェクトを利用するのであれば、事前に比較表（英語）などで確認した方がいいでしょう。

簡単なサンプル

sessionStorageとlocalStorageオブジェクトのAPIは全く同じなので、下記のサンプルはどちらにも適用可能です。今回のサンプルでは、localStorageを利用してみます。ここでは、前提条件として、ブログのオーサリングツールを開発中で、ユーザーが執筆中の傑作が消えてしまわないように途中で保存できるようにしたいものとします。まずフォームからデータを抽出し、そのデータを後から参照できるように保存することにします：

localStorage.setItem("title", "僕のブログタイトル");
localStorage.setItem("body", "これは最高のブログ記事にきっとなる！！！");

Web Storageオブジェクトにデータを格納するのはとても簡単ですー格納する文字列と、それを参照するためのキーとなる文字列を渡すだけです。重要なのは、Web Storageには文字列しか格納できないということですー JSONは格納する前に文字列としてシリアライズし、取り出したあとには格納時と逆の操作をしてあげる必要があります。データの取り出しも同様に簡単です。

var title = localStorage.getItem("title");
var body  = localStorage.getItem("body");

ブログ記事を編集中にユーザーはウィンドウやブラウザそのものを閉じたり、あるいは数日後に編集を再開するかもしれませんが、このアプリケーションであればあたかも1度のセッション中であるように動作することになります。Web Storageはデータをクリアするための簡単な方法も提供しています：

localStorage.clear();

ただしlocalStorageをクリアする際には注意が必要です。localStorageオブジェクトはドメイン毎に作成されますが（他のドメインのlocalStorageをクリアすることはできません）、同じドメインの複数のスクリプトがlocalStorageを利用している可能性があります。従って、クリアするよりも、選択的にデータを削除する方がいいかもしれません：

localStorage.removeItem("title");
localStorage.removeItem("body");

以上がHTML5ファミリーの中でも比較的簡単なWeb Storageです。

HTML5ファミリー

HTML5ファミリーに関する連載記事：

この記事は 2010年08月18日の 8:43 pm に投稿されました。この記事のカテゴリーは HTML5です. この記事への反応は RSS 2.0で取得することができます。