2窓に対して同時に変更を加える(localstrageをEventListenerに登録する)

例えば、背景を変えるオプションを作ったとして・・

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

返信を残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください