読者です 読者をやめる 読者になる 読者になる

localStorageとsessionStorage

IE8からどうやらlocalStorageとsessionStorageに対応する模様。これらStorage系のオブジェクトは、WHATWGのWeb Application1.0仕様のClient Side Storageを実装したものだということを祈ります。ドキュメントは、この辺で(HTML Standard)、簡単に言うと、ブラウザー側にデータを保存するための技術。ちなみにFirefox2以上でglobalStorage/sessionStorageもClient Side Storageのそれが実装されています。

実験

ttp://localhost/foo.html
<html>
<head></head>
<body>
<script type="text/javascript">
localStorage.hoge = "Hello World!!";
</script>
<a href="http://localhost/bar.html">To bar.html</a>
</body>
</html>
ttp://localhost/bar.html
<html>
<head></head>
<body>
<script type="text/javascript">
alert(localStorage.hoge); // Hello World!!
</script>
</body>
</html>

とまぁ。別のページでlocalStorageオブジェクトの内容が参照できる。便利><!

localStorageオブジェクトには文字列しか放りこめない

localStorage.foo = {foo:'foo'};
alert(localStorage.foo); // [object Object]
alert(typeof localStorage.foo); // string
localStorage.bar = 1;
alert(typeof localStorage.bar); // string

localStorageオブジェクトの中身

for(i in localStorage){ document.write(i, ', '); };による書き出しです。5.10.1.2 The Storage interfaceセクションには存在しないremainingSpaceがあるけど、interfaceに定義されているプロパティやオブジェクトは一通りそろっているみたい。

length, remainingSpace,
alert('key' in localStorage); // true
alert('getItem' in localStorage); // true
alert('setItem' in localStorage); // true
alert('removeItem' in localStorage); // true
alert('clear' in localStorage); // true

remainingSpaceに迫る

localStorage.clear();
alert(localStorage.remainingSpace); // 5000000
localStorage.hoge = "Hello World!!";
alert(localStorage.remainingSpace); // 4999983

名前からわかるけどremaining(=残りの)Space(=領域)。つまり、あとどれくらいlocalStorageに保存してあげられるかを確認できる。

localStorageとsessionStorageの違い

仕様をよく読んでないので挙動から推測すると、localStorageはブラウザを閉じてもデータが残っていて、sessionStorageはブラウザを閉じるとデータが消える模様です。

注意事項①

ローカル環境ではできないので、サーバ経由(ローカルホスト可能)で検証お願いします。でないと、localStorage/sessionStorageともにundefinedになります。

注意事項②

9/25加筆。IEβ1だと、localStorage/sessionStorageは実装されていなく、Firefoxと同じglobalStorage/sessionStorageが実装されているのでIE8β1で出来ない><という場合はβ2を試して下さい。(出典は、マイクロソフトの公開していたPDFですけど、URL紛失のために参考程度まで)