Web Storageのイベント

Web Storageにはデータに変更があった場合に変更を検知できるStorageイベントがある。このイベントを利用すれば、複数ページでWeb Storageを利用している際に誤ってデータを上書きしたり、表示が古いままだたったりすることを防ぐことができる。

複数ページのビューの同期サンプル

データの登録ページで更新したデータの内容を、別のページでリアルタイムに表示に反映する。

①データの登録ページ

  <form action="#" method="post" id="register">
    <label for="name">名前: </label>
    <input type="text" name="name" value="" id="name">
    <input type="submit" value="登録">
  </form>

  <script type="text/javascript">
    var form = document.querySelector('form');

    // フォームの送信イベント
    document.querySelector('form').addEventListener('submit', function(e){

      // デフォルトの動作をキャンセル
      e.preventDefault();

      // データを”name”をキーにして登録する
      localStorage.setItem('name', form['name'].value);

      // コンソールログ出力
      console.log('name', form['name'].value);
    }, false);
  </script>

②データ表示ページ

  <h1 id="view"></h1>
  <script type="text/javascript">
    // 表示用のh1要素を取得する
    var h1 = document.querySelector('#view');

    // 登録されている"name"を取得して表示する
    h1.textContent = localStorage.getItem('name');

    // Storageイベントで変更を検知
    window.addEventListener("storage", function(e) {

      // 新しい"name"で表示を更新する
      if ( e.key === 'name' ) {
        h1.textContent = e.newValue;
      }
    }, false);

  </script>

jQueryを使ってイベントを取得することもできる。上記の「②データ表示ページ」はjQueryを使うと次のようになる。

<h1 id="view"></h1>
<script type="text/javascript">
$(function(){
  // 表示用のh1要素を取得する
  var h1 = $('#view');
  // 登録されている"name"を取得して表示する
  var msg = localStorage.getItem('name');
  if(msg){
    h1.text(msg);
  }
  // Storageイベントで変更を検知
  $(window).bind("storage", function(e) {
	  // 新しい"name"で表示を更新する
	  if(e.originalEvent.key === 'name'){
	  	h1.text(e.originalEvent.newValue);
	  }
  });
});
</script>

Storageイベントのイベントオブジェクト