2窓に対して同時に変更を加える(localstrageをEventListenerに登録する)
2014年2月3日
例えば、背景を変えるオプションを作ったとして・・
<form id="option"> <input type="text" id="color" value=""> <inpup type="submit" value="変更"> </form>
$(function(){
$('#option').submit(function(){
var v = $('#color').val();
$('body').css('background-color','#' + v);
});
});
何のバリデートもしてませんが、送信された色に背景が変わるはずです。
もし同じoption.htmlを別窓でも開いていた場合、一緒に変わる方がいいですよね?オプションですからね。
$(function(){
$('#option').submit(function(){
var v = $('#color').val();
$('body').css('background-color','#' + v);
// localStorageに色を保存
localStorage.setItem('color',v);
});
// storageイベントを追加
window.addEventListener("storage", function(event) {
// 変更されたkeyがcolorの場合
if ( event.key == 'color') {
// 変更されたvalueを取得
v = event.newValue;
// 背景変更
$('body').css('background-color','#' + v);
}
});
});
localStorageが使えるかチェックしてませんが、対応してるブラウザなら動くでしょう・・。
ちなみにlocalStorageのeventは、自身が加えた変更ではイベントが発生しません。
さらに言うと、同じ値を再setした場合もイベントが発生しませんのでご注意。