Web Storage のデータをウィンドウ間で同期する (IE8+)

HTML 5 で導入された Web Storage ではブラウザに数 MB 程度ほどのデータを保存できる。

仕様上は他のタブやウィンドウでデータが変更されると storage イベントが発生することになっているが、ブラウザによっては多少癖のあるものも存在する。各ブラウザの癖を考慮したコードは次の通り。

if (window.addEventListener) { // Modern Browsers, IE 9+
	window.addEventListener("storage", function() {
		// IE 9-11 では storage イベントの発生から内容が反映されるまで遅延がある
		setTimeout(reloadStorage);
	}, false);
} else if (window.attachEvent) { // IE 8 では storage イベントが発生しない
	window.attachEvent("onfocus", reloadStorage);
}

Internet Explorer 8 では storage イベントが発生しないため、ウィンドウへの focus イベントで代用している。ユーザの操作によりストレージの内容が変更される Web ページでは実用上問題ない。

また Internet Explorer 9-11 では、storage イベントが発生した時点では取得できるデータが更新されないため、setTimeout() を用いている。