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した場合もイベントが発生しませんのでご注意。