StorageEventってlocalStorageとかsessionStorageとかでStorageの値を書き変えたときに発生するイベントってのは知ってたんだけど、前に試してみて動かなかったんで実装されてないのかなーと思って放置してた。

でも入門HTML5を読んだら、localStorage実装されてたらStorageEventも実装されてるよって書いてあったから試してみたけどやっぱ動かなかったんでちゃんと調べたら、そもそも勘違いしてたことに気づいた。

普通に

window.addEventListener('storage', function(evt) {
    console.log(evt);
}, false);

ってスクリプトを書いたHTMLを開いて、コンソールとかで localStorage.setItem(’hoge’, Math.random()) とか実行して発火しなかったんで、なんだよやっぱ動かねーじゃねーかと思ったんだけど、仕様書をよく読んだらこんな表記があった。

When the setItem(), removeItem(), and clear() methods are called on a Storage object x that is associated with a local storage area, if the methods did something, then in every Document object whose Window object’s localStorage attribute’s Storage object is associated with the same storage area, other than x, a storage event must be fired, as described below.

Web Storage

つまり、Storageを更新した場合、Storageを更新したドキュメント以外の、同じStorage領域を持ってるドキュメントでStorageEventが発火するってことみたい。

ウインドウを二つ開いて、コンソールでLocalStorage更新したら実行してない方のウィンドウで発火してた。こういう使い方だったのね。