Glamenv-Septzen(ぐらめぬ・ぜぷつぇん)(archive)カテゴリ: HTML
WebStorageのサンプルとメモ。
参考：
- Web Storage
- LocalStorageがおもいのほか便利すぎたのでまとめ - ブックマクロ開発に
Firefox 6.0, Chrome 13, IE9 にて確認。
サンプル
t_webstorage.js:
function getkey_l()
{
alert(localStorage.testkey);
}
function setkey_l()
{
localStorage.testkey = document.forms[0].testkey.value;
}
function getkey_s()
{
alert(sessionStorage.testkey);
}
function setkey_s()
{
sessionStorage.testkey = document.forms[0].testkey.value;
}
t_webstorage1.html:
<html> <head> <title>Web Storage Example 1</title> <script src="./t_webstorage.js"></script> </head> <body> <form> <h4>Value:</h4> <input type="text" name="testkey" value="" /> <h4>Local Storage</h4> <input type="button" value="getkey_l()" onclick="getkey_l()" /> <input type="button" value="setkey_l()" onclick="setkey_l()" /> <h4>Session Storage</h4> <input type="button" value="getkey_s()" onclick="getkey_s()" /> <input type="button" value="setkey_s()" onclick="setkey_s()" /> </form> </body> </html>
以下のようにアクセスできるようにしておく。
http://foo.example.com/html5/t_webstorage.js http://foo.example.com/html5/t_webstorage1.html
複数TABまたはウインドウで開いてみると、localStorageの方はget/setが連動しているのに対し、sessionStorageの方はTAB/ウインドウ毎に独立していることが確認できる。またTAB/ウインドウを開き直したりすると、sessionStorageはその都度値がクリアされていることが確認できる。
WebStorageはSameOriginポリシーに基づく。
そのため、hostsファイルを編集するなどして
http://bar.example.com/html5/t_webstorage1.html
などからアクセスしてみると、きちんと独立してget/set出来ていることを確認できる。
もちろん、
<script src="./t_webstorage.js"></script>
を
<script src="http://bar.example.com/html5/t_webstorage.js"></script>
とした t_webstorage2.html を用意して foo.example.com からアクセスしてみても正常に動作する。JavaScriptファイルの場所ではなく、実際に動作するホストに基づく。
iframeと別ドメイン
SameOriginポリシーに基づくということは、iframeで別ドメインを読み込んだ時、DOMオブジェクトへのアクセスがブロックされることが期待される。
http://bar.example.com/html5/t_webstorage3.html
としてアクセスできるHTMLを以下のように用意してみる。
<html>
<head>
<title>Web Storage Example 1</title>
<script src="./t_webstorage.js"></script>
</head>
<body>
<form>
<h4>Value:</h4>
<input type="text" name="testkey" value="" />
<h4>Local Storage</h4>
<input type="button" value="getkey_l()" onclick="getkey_l()" />
<input type="button" value="setkey_l()" onclick="setkey_l()" />
<h4>Session Storage</h4>
<input type="button" value="getkey_s()" onclick="getkey_s()" />
<input type="button" value="setkey_s()" onclick="setkey_s()" />
</form>
<hr />
<iframe src="http://foo.example.com/html5/t_webstorage1.html" name="sub"></iframe>
<hr />
<script>
function getkey_l2()
{
alert(window.sub.localStorage.testkey);
}
function setkey_l2()
{
window.sub.localStorage.testkey = document.forms[1].testkey2.value;
}
function getkey_s2()
{
alert(window.sub.sessionStorage.testkey);
}
function setkey_s2()
{
window.sub.sessionStorage.testkey = document.forms[1].testkey2.value;
}
</script>
<form>
<h4>Value:</h4>
<input type="text" name="testkey2" value="" />
<h4>Local Storage</h4>
<input type="button" value="getkey_l2()" onclick="getkey_l2()" />
<input type="button" value="setkey_l2()" onclick="setkey_l2()" />
<h4>Session Storage</h4>
<input type="button" value="getkey_s2()" onclick="getkey_s2()" />
<input type="button" value="setkey_s2()" onclick="setkey_s2()" />
</form>
</body>
</html>
下半分のFormとJavaScriptは、iframe内の別ドメインのWebStorageオブジェクトを参照している。
Chrome13:
Unsafe JavaScript attempt to access frame with URL http://foo.example.com/html5/t_webstorage1.html from frame with URL http://localhost/html5/t_webstorage3.html. Domains, protocols and ports must match. t_webstorage3.html:29 Uncaught TypeError: Cannot set property 'testkey' of undefined
Firefox 6.0:
Error: Permission denied to access property 'localStorage' Source File: http://localhost/html5/t_webstorage3.html Line: 25
IE9:
SCRIPT5: アクセスが拒否されました。
以上のように、予想通りiframe別ドメイン間でのアクセスがブロックされることが確認できた。