ローカルストレージの対応を調べる
ローカルストレージを使う前に、ブラウザーの対応状況を確認しておきましょう。ローカルストレージは以下のブラウザーでサポートされています。多くのユーザーが利用しているInternet Explorer 8（IE8)以降も対応しているので、すでに十分使える技術だと言えます。
- Internet Explorer 8以降
- Safari 4以降
- Firefox 3.5以降
- Google Chrome 3以降
- Opera 10.5以降
IE8でもローカルストレージを使用できる
ブラウザーがローカルストレージに対応しているかどうか、スクリプトで調べてみましょう。ローカルストレージはwindowオブジェクトのlocalStorageプロパティにアクセスして使用します。このため、localStorageの存在を調べればローカルストレージが利用可能か判断できます。スクリプトは以下のようにいたって簡単です。
<div id="result">ローカルストレージは使えません</div>
<script>
if (window.localStorage){
document.getElementById("result").innerHTML = "ローカルストレージは使えます";
}
</script>
Safari 5では「ローカルストレージを使用できる」とメッセージが表示される
IE6はローカルストレージには対応していないため、「使用できない」と表示される
ローカルストレージの保存はオリジン単位
ローカルストレージはオリジン(プロトコル+ドメイン+ポート番号)ごとにデータを保存します。URLに含まれるページ（HTML）単位ではありません。たとえば次のオリジンにデータを保存するとします。
http://www.openspc2.org/
このとき以下のURLにあるページでローカルストレージにデータを保存したとします（説明の都合上、番号を振ってあります）。
(1) http://www.openspc2.org/HTML5/WebStorage/Sample/0001/index.html
(1)で保存したローカルストレージのデータは、当然(1)のページから読み出せます。それでは以下の場合はどうでしょうか。
(2) http://www.openspc2.org/HTML5/WebStorage/JavaScript/Sample/0001/index.html
1つ深い階層になりました。この場合、(1)で保存したデータは(2)のページでも読み出せます。続いて以下の場合はどうでしょうか。
(3) http://www.openspc2.org/0001/index.html
(1)よりも上位の階層にありますが、この場合も(1)で保存したデータを読み出せます。(1)～(3)は同一のオリジン(プロトコル+ドメイン+ポート番号)なので、いずれも同じようにデータを読み出せるわけです。逆にいうと、同一のオリジンで同じ名前を付けてデータを保存すると、ページが異なっていてもデータが上書きされてしまいます。
(4)はオリジンが異なる（ドメイン名が違う）ので(1)～(3)で保存されたデータは読み出せません。当然、(4)で保存したデータは(1)～(3)のページでは読み出せません。
(4) http://www2.openspc2.org/
