localStorageはいい感じ

今日のネタは、HTML5で規定されているlocalStorage(ローカルストレージ)についてです。
以下、特徴をいくつか挙げてみます。

2011/07/06 イベントについて追記

ローカルにデータを保存します

PCやスマートフォンなどの端末にデータを保存します。
別のサイトに行こうが、ブラウザを閉じようが、データが残っています。
localStorageの使い方としては、キャッシュ的な使い方が良さそうです。
「サーバーからデータを取得してlocalStorageに格納しておく。次にアクセスしたときはlocalStorageから取得する。もしなければサーバーに取りに行く。」
って感じで。
サーバーに取りに行かなくて済むなら処理が早くなってハッピーですね。
所詮はローカルのデータなので、データが存在することを前提にしてはいけません。

モダンなブラウザなら大概使えます

IE8以上、FireFox、Chrome、Safariなど、有名なブラウザなら対応しています。
androidやiOSなどのスマートフォンのブラウザでもOKです。
ぶっちゃけ、IE7とかIE6が癌ってことですね。
早く絶滅してくんねーかな。

IEだとlocalStorageをオンに設定してないと動きません。
筆者の環境だと、気づいたときはオフでした。
まさかデフォルトでオフ！？
以下のような感じで、インターネットオプションを設定してください。


もう一つ、IEについて注意。
IEでローカルのHTMLファイルを直接実行した場合(つまりエクスプローラでHTMLファイルをダブルクリックして実行した場合)、localStorageオブジェクトを取得できないようです。
つまりlocalStorageを使えません。
きちんとWebサーバー経由で実行すれば問題ありません。
プログラミング→動作確認の流れが面倒になりますね。

同一ドメイン原則が適用されます

JavaScriptでアクセスするので同一ドメイン原則が適用されます。
例えば、
www.example.com/test.html
から
www.yahoo.co.jp/index.html
のlocalStorageにアクセスできません。
要するに、他人様のサイトのデータにはアクセスできません。

でも同一ドメイン内なら別のページでもOKです。
test1.htmlでlocalStorageに格納したデータを、test2.htmlで取得したりできます。
ページ間でデータを引き渡すのに使えますね。
対応してないブラウザを切り捨てる、という前提でですが…。

※追記
xAuthやiframeなどを使ってクロスドメインで同一localStorageにアクセスできるみたいです。
ただ、少し敷居が上がっちゃうみたい。
やろうと思えばできる、くらいの認識で。

保存容量はいかほどなの？

HTML5の仕様では、特に保存容量の上限は決まってないようです。
「ブラウザの実装に任せるよ」って話です。
cookieみたいに数千バイトまで、ってケチくさい量ではないのでそんなに気にすることもないかもしれません。
普通のサイトがインターネット経由でやり取りするデータなら問題ないと思います。

連想配列みたいにアクセスできます

localStorageの基本的な使い方

//格納する
localStorage.setItem(key, value);
localStorage.key = value; //←推奨されません
localStorage["key"] = value; //←推奨されません

//取得する
var value = localStorage.getItem(key);
var value = localStorage.key; //←推奨されません
var value = localStorage["key"]; //←推奨されません

//キーを列挙する
for (var i = 0; i < localStorage.length; i++) {
    var key = localStorage.key(i);
}

//1件削除する
localStorage.removeItem(key);

//全部削除する
localStorage.clear();

localStorage.keyとかlocalStorage["key"]みたいに、まさにJavaScriptっぽくアクセスできます。
が、これらの書き方だとブラウザ間で微妙に動作が異なるらしく…。
現時点だとおとなしくgetItem()、setItem()を使うほうが良さそうな雰囲気です。

また、上記のコードでvalueは文字列じゃないとダメです(現時点では)。
HTML5の仕様ではオブジェクトOKとなってるので、そのうちブラウザ側で対応してくれるでしょう。
「今まさにオブジェクトで格納したいんだよゴラ！！！」って人はJSONに直して格納すると血圧が下がるかもしれません。

JSONに直して格納

//オブジェクトからJSONに直して格納する
localStorage.setItem(key, JSON.stringify({"hoge": "fuga"}));

//JSONからオブジェクトに直して取得する
var value = JSON.parse(localStorage.getItem(key));

イベント

ローカルストレージが変更されたというイベントを受け取ることができます。
setItem()、removeItem()、clear()を実行したときにイベントが発行されます。
この機能は、ローカルストレージが変更されたことを「他のページ」に伝えます。
自分自身(イベントを発行したページ)には伝わりません。

デモを作ってみました。
以下の二つのページを両方とも開いてみてください。
イベントを発行するページ
イベントを受け取るページ

大雑把なコードはこんな感じです。
jQueryを使っています。
jQueryを使わない場合はaddEventListener関数を使ってください。

ローカルストレージ変更のイベント

//イベントを発行するページ
localStorage.setItem("key", "value");

//イベントを受け取るページ
$(window).bind("storage", function (event) {
    alert(
        //変更前の値
        "oldValue:" + event.originalEvent.oldValue + "\n" +
        //変更後の値
        "newValue:" + event.originalEvent.newValue + "\n" +
        //イベントを発行したページのURL
        "url:" + event.originalEvent.url + "\n" +
        変更されたアイテムのキー
        "key:" + event.originalEvent.key + "\n" +
        //ローカルストレージ全体
        "storageArea:" + event.originalEvent.storageArea
    );
});

今後、localStorageはガリガリ使われることになりそうです。
おいしく召し上がりたいですね。