本当に遊んでみただけだけど、例えばこんなの。

リロードする度に訪問回数がインクリメントされて、3の倍数の時には「奴」が疼き出し、5の倍数の時には「奴」が目覚めてしまうという、訪問回数カウンタとFizzBuzzを組み合わせたしょーもない何かです。まぁこれだけだと「そうですね…で？」みたいな話で終わりなんだけど、一応無駄にlocalStorageを使ってみてます。ちなみに「貴様は既に漆黒の闇に囚われている…」云々て表示されてる場合はlocalStorageが使えないブラウザなので、違うのが入ってたらそれで試してみてください。Firefox、Safari、Chromeあたりの最新版だと動いてるはず。多分。Operaも動いてるっぽい。

ろーかるすとれーじ？

Web Storageって何なのって人はHTML5.JPにある資料でも読んでもらうとして、まぁ大雑把に言うとブラウザにKey-Valueストレージが付いててなってJSから簡単に扱えるようになってるよって話。使い方は簡単。単に、こんな風にすればいいだけ。

localStorage.devilCount = 1;

これでlocalStorageにdevilCountってKeyで'1'って値が保存されて、同じドメインのページからだったらlocalStorage.devilCountって形で参照できるようになって、ブラウザが終了しても永続化されてるという。かんたん。リロードするだけじゃなく、試しにブラウザ閉じてもう一度この記事を見てもっても、ちゃんとカウントアップされてるのが分かるはず。べんり。この例は流石にしょーもなさすぎるけど、まぁ上手く使えば色々できるよね。

こんな風にアクセスすることもできる。

localStorage['devilCount'] = 1;
localStorage.setItem('devilCount', 1);
localStorage.getItem('devilCount');

消すときはこんな感じ。

delete localStorage.devilCount; // or localStorage.removeItem('devilCount');
localStorage.clear();           // 全て消す

ちなみに、localStorageに保存されてる値は文字列として保存されるので、文字列以外の値を入れたければJSONとしてシリアライズ/デシリアライズするとかして使う必要がある。上の例ではparseIntして数値として扱ったりしてる。

あと、localStorageはorigin単位で別のストレージになることに注意。ドメインやポートが変わるとlocalStorageも変わるので、例えばhttp://image.blog.livedoor.jpとかhttps://blog.livedoor.jpとかからはアクセスできないし、一方で別のブログ（例えばhttp://blog.livedoor.jp/faulist-mobile/とか）からはアクセスできてしまうはず。

せっしょんすとれーじ

同じものをsessionStorageで実装してみる。インターフェースは全く同じなので、ソース見てもらえれば分かるけど基本的にはlocalStorageとしてたものをsessionStorageに書き換えるだけ。

何回かリロードしたあと、一旦ウインドウを閉じる、別のウインドウで同じページを開く、などしてみると、違いが分かると思う。上のlocalStorageを使ってる方はブラウザ終了させようが別のウインドウで開こうがその度にインクリメントされるけど、こっちは「このウインドウが開かれてから閉じられるまで」の間だけ値が保存されるので、ブラウザを終了させると当然リセットされるし、別のウインドウで開くとまた1からカウントされる。

インターフェースが全く同じなのは楽でいいな。次は何やってみよう。コミュニケーションAPIかな。

補足

セッションストレージはブラウザ閉じたら消えるけど、ローカルストレージの方は消えないので、気持ち悪い場合はこの記事中の「訪問回数をリセットする」ボタンを押すか、SafariやChrome、Operaだと開発者向けのツールから消せる。もう一度記事見たらまた保存されちゃうけど。Firefoxだとどっから消すんだろうな。

あと、上記のコードを自分で書いて試してみるときは、Firefoxの場合はローカルファイルを開いても駄目で、Webサーバを介して見る必要がある。ローカルファイルとして開いた場合、ローカルストレージはリロードする度にリセットされてしまって値が保存されないし、セッションストレージは無効になっててエラーが出る。Chrome、Safariでは特に問題ない。