web开发技巧-同域名下跨界面通信-storage事件

web开发技巧-同域名下跨界面通信-storage事件

假设这么一个场景，同域名下的两个界面，A界面在修改了部分值后需要B界面进行同步更新，此时就可以用到storage事件。
A界面代码：

  <input type="text" name="" id="input">
  <script>
    document.getElementById('input').onblur = function () {
      localStorage.setItem('input', JSON.stringify(this.value))
    }
  </script>

B界面代码：

  <input type="text" name="" id="input">
  <script>
    window.addEventListener('storage', function(event) {
      document.getElementById('input').value = JSON.parse(event.newValue);
    })
  </script>

现在开始测试：
界面A输入666

界面B就会触发事件：

ok，完成！