实现原理

localStorage中支持监听storage变化时的事件,并且只有在不同标签页面,同源网页的时候才会触发,这里恰好解决的我们的需求:
window.addEventListener(‘storage’, callback);

示例

// 父页面(数据改变的位置设置)
localStorage.setItem("dialogOpen", this.dialogOpen);
// 子页面监听父页面的变化
  mounted() {
    const _that = this;
    window.addEventListener("storage", function(e) {
      console.log(e, "e");
        if (e.key == "dialogOpen") {
        _that.$nextTick(() => {
          if (e.newValue == "true") {
            _that.dialogOpen = true;
          } else if (e.newValue == "false") {
            _that.dialogOpen = false;
          }
        });
      }
  },

Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐