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になります。
