連載
» 2011年08月12日 00時00分 公開

連載:人気順に説明する初めてのHTML5開発:ブラウザでストレージ? Web Storageを使いこなそう (3/3)

[ナオキ(監修:山田祥寛),WINGSプロジェクト(http://www.wings.msn.to/)]
前のページへ 1|2|3       

■Web Storageのイベント

 sessionStorage、localStorageの両方でストレージ情報に関する操作を実施した際には「storageイベント」が発生し、タブ内、または複数のタブ内など、それぞれのWeb Storageの範囲内で通知される。

 storageイベント時に取得できるプロパティは以下のとおりだ。

プロパティ 機能概要
key イベント発生対象となったキー
oldValue keyに対する古いバリュー
newValue keyに対する新しいバリュー
url イベントが発生したURL
StorageArea 変更されたWeb Storageオブジェクト
Web Storageのstorageイベント時に取得できるプロパティの内容

 storageイベントを処理する関数をイベントリスナとしてブラウザのイベントに登録後、その関数の引数から、上記の表で示した各プロパティの内容を確認できる。

 次のコードは、イベントリスナとして登録した関数の引数からnewValueプロパティの値をメッセージボックス表示している例だ。

window.addEventListener("storage", function(evt) {
  window.alert(evt.newValue)
})

storageイベントの処理

 storageイベントを活用することで、Web Storageのデータの動きなどをより詳細に追えるようになる。

■Web Storageにおける注意点

 便利なWeb Storageだが、現場で活用する際には押さえておきたい注意点があるので最後に紹介しておく。

文字列での保存

 W3Cが策定した仕様では、Web Storageにオブジェクトも保存できるとあるが、2011年7月現在、まだこの仕様に対応しているブラウザはない。そのため、オブジェクトを保存しても内部で文字列に変換される点に注意が必要だ。

 参考までに、オブジェクトをWeb Storageに保存して、取得するコードを示そう。

var storage = sessionStorage;
storage.setItem("naoki", ["WINGSプロジェクト","CLR/H","せきゅぽろ"]);
var data = storage.getItem("naoki");

Web Storage上でのオブジェクトの保存

 試しに上記のサンプルを実行し、その結果を開発者ツールで見たのが図7だ。ハッシュの値が文字列に変換されて保存されているのが確認できる。

図7 文字列に変換されたオブジェクト

 この問題の対策として、現時点ではJavaScriptオブジェクトをJSON文字列に変換するJSON.stringifyメソッドを使用し、JSON文字列に変換して保存することをお勧めする。データを取り出す際はそのまま取り出すと文字列になるので、JSON文字列をJavaScriptオブジェクトに復元するJSON.parseメソッドを使用してデータを変換する必要がある。このような手間はかかるが、この方法でオブジェクトをデータとして扱えるようになる。

 次のコードはその例である。

var storage = sessionStorage;
storage.setItem("naoki", JSON.stringify(["WINGSプロジェクト","CLR/H","せきゅぽろ"]));
var data = JSON.parse(storage.getItem("naoki"));

JSON文字列化による、Web Storageへのオブジェクトの保存(appendixStorage.htm

 上記のサンプルの実行結果を開発者ツールで見たのが図8だ。

図8 JSON文字列化したオブジェクトをWeb Storageに保存した結果

localStorage利用時のデータの混在

 localStorageは「ドメイン:ポート番号」のオリジン単位でデータが保存される。つまり、ポート以下の階層によるページ構成では、データが混在する場合がある。

 この場合、新規追加/編集/削除もすべて同一に扱われるため、曖昧な名前ではなく、

  • 「保存するデータが何か?」
  • 「どのページで利用されるのか?」

が明確に分かるような、キー名の命名規則が重要になる(例えば、sample.htmlページ内のcategoryデータであれば、「sample_category」というキー名にするなど)。

■まとめ

 今回はHTML5で2番目に人気のWeb Storageにフォーカスを当てて解説した。比較的シンプルな情報のやりとりを実施していたWebサイトでは、クッキーの利用が主流だった。しかしこれから、HTML5を使って、多くの情報を複雑にやりとりするWebアプリケーションにシフトする中で、すでにモダンなブラウザでは実装が完了しているWeb Storageは、強力な味方になってくれるだろう。ただし、注意点も忘れずに上手に使用していただきたい。

 次回は、クライアント・アプリケーションと同じような操作性を実現するドラッグ&ドロップを紹介する。お楽しみに。

「連載:人気順に説明する初めてのHTML5開発」のインデックス

連載:人気順に説明する初めてのHTML5開発

前のページへ 1|2|3       

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。