Hatena::ブログ(Diary)

latest log このページをアンテナに追加 RSSフィード

2010-07-29

WebStorageで、ワンライナー IE8, IE9pp3 ブラクラ

localStorage.removeItem() 以外にも、localStorage.setItem(); や localStorage[key] = value; でも落ちるようです(コメント欄参照)

<input id="A" type="text" value="" /><script>localStorage.removeItem(A.value)</script>

上記のコードをIE8で実行すると、タブクラッシュ → 復元 → タブクラッシュ → 復元機能停止 が発生します。

IE9pp3ではブラウザがクラッシュします。

回避するには

テキストフィールドに値を入れるか、A.value を文字列型にキャストすることにより回避できます。

<input id="A" type="text" value="hoge" /><script>localStorage.removeItem(A.value)</script>
または
<input id="A" type="text" value="" /><script>localStorage.removeItem(A.value + "")</script>

動的に発病することも

以下のコードでも発病条件を満たすので気をつけてください。テキストフィールドに対する参照をremoveItemの引数に渡すとダメです。

<input id="A" type="text" value="a" /> // 最初テキストフィールドは空ではないが…
<script>
A.value = ""; // テキストフィールドを空にして…
localStorage.removeItem(A.value); // これでクラッシュ
</script>

変数に入れて渡すのもダメです。

A.value = ""; // テキストフィールドを空にしても…
var val = A.value; // 一度変数に入れれば、あるいは…
localStorage.removeItem(val); // 残念!

以下のコードでは落ちません。

localStorage.removeItem("")

結局どうすればよいか

removeItem() に渡す引数は、必ず文字列にキャストしてしまえば安心できます。

localStorage.removeItem(value + "")

これ以外にも、IE の WebStorage(DOM Storage) の実装は localStorage.key なども W3C の仕様とは微妙に異なっているようです。

そのうち修正されるといいですね。

p2bp2b 2010/07/31 06:03 こんにちは。いつも記事は興味深く読ませていただいてます。IE8では、値をセットしてもクラッシュするというのを体験しました。
http://p2b.jp/1260967011

uupaauupaa 2010/07/31 06:50 はじめまして。コメントありがとうございます。

これですね → http://p2b.jp/1260967011

あらら setter でも落ちますか。ということは

setItem(key)
removeItem(key)
localStorage[key] = 代入

の3パターンで発生するんですね。貴重な情報ありがとうございます!

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト

コメントを書くには、なぞなぞ認証に回答する必要があります。

トラックバック - http://d.hatena.ne.jp/uupaa/20100729/1280337286
Connection: close