2010年6月8日火曜日

HTML5 のWeb Storageを使ってみた

今回は、ローカルストレージと、セッションストレージを使ってみました!

■ローカルストレージ
下記のような 簡単なサンプルを作りました。
storeにて値の登録を行います。そうすると、store dateに登録されている一覧が表示されます。
さらに追加で登録を行うと、下記のようになります。


ローカルストレージのサンプル


・ソース
JavaのHashMapに値を格納するような感覚で使えます!
前回記述した通り、格納した値は消してあげないと消えません。
同一オリジン、同一ブラウザでなら、消されるまで値が保持されます。


■セッションストレージ
セッションストレージのサンプル
キャプチャ的には同じなので貼りません^_^;
基本的には、ローカルストレージのlocalstorageをsessionstorageに置換してあげれば使えます!
API的にも同じものが用意されています!

ただし!
前回説明した通り、別ウィンドウを開くと値はコピーされますが、
その瞬間だけ値が同じなだけでどちらかで更新してももう一方には反映されません!
上記のサンプルにて、試せるようにしてあるので実際に試してみてください。

こちらは、ウィンドウを閉じれば保持していた値は消えるので、特に気になるところはないな。
使い道は、、、別ウィンドウを開くときにパラメータとして渡したいってときぐらいしか使わないか?
渡せるけど、その画面から情報は受け取れないけどねw

■いちおうAPIを書いておきます
・メソッドについて

メソッド解説
lengthストレージ内に格納されているデータ数
key(index)指定されたインデックスのKeyを返す。存在しない場合はnullが返る
getItem(key)指定されたKeyに対応する値を返す
setItem(key, data)ストレージに指定したKey値で値を登録する
removeItem(key)ストレージから指定されたKey値に対応するデータを削除する
clear()すべてのデータをストレージから削除する

・storageイベントのプロパティについて

プロパティ解説
key変更されたKey。clear()メソッドが呼ばれた際にnull
oldValue変更前の値(のコピー)。新しいキーで値が登録された場合はnull。
newValue変更後の値(のコピー)。値が削除された場合にはnull。
urlイベント発生元のドキュメントURL。
storageArea変更されたストレージへの参照。
使い方
なぜか、イベントで処理をするとブラウザがクラッシュすることがありますので、気をつけてください。
使い方が悪いのか?それともブラウザがまだちゃんと対応されていないのか?

0 件のコメント:

コメントを投稿