JavaScript实时监听localStorage变化的实现方法小结_Javascript

在不同窗口/选项卡中监听 localstorage 变化

当 localstorage 的数据在一个窗口/选项卡中改变时，其他同源的窗口/选项卡会触发 storage 事件。我们可以利用这个事件来监听 localstorage 的变化。

示例代码

// 添加 storage 事件监听器
window.addeventlistener('storage', function(event) {
  if (event.key === 'groupid') {
    console.log('new value:', event.newvalue);
  }
});

解释

storage 事件会在同源的其他窗口/选项卡中触发。
event.key 是变化的 localstorage 项的键。
event.newvalue 是变化后的新值。

注意事项

只有在不同的窗口/选项卡之间修改 localstorage 时，才会触发 storage 事件。
如果在同一个窗口/选项卡中修改 localstorage，则不会触发 storage 事件。

在同一个窗口/选项卡中监听 localstorage 变化

在同一个窗口/选项卡中，storage 事件不会被触发。我们可以通过自定义事件或其他手段来实现对 localstorage 变化的监听。

方法一：使用自定义事件

设置 localstorage 并触发自定义事件

function setlocalstorageitem(key, value) {
  localstorage.setitem(key, value);
  const event = new customevent('localstoragechange', { detail: { key, value } });
  window.dispatchevent(event);
}

监听自定义事件

window.addeventlistener('localstoragechange', function(event) {
  if (event.detail.key === 'groupid') {
    console.log('new value:', event.detail.value);
  }
});

方法二：使用定时器轮询

另一种方法是在一定时间间隔内轮询 localstorage 的值，检查是否发生变化。

let lastvalue = localstorage.getitem('groupid');

setinterval(function() {
  const newvalue = localstorage.getitem('groupid');
  if (newvalue !== lastvalue) {
    console.log('new value:', newvalue);
    lastvalue = newvalue;
  }
}, 1000); // 每秒检查一次

方法三：使用 proxy 对象

如果希望对所有的 localstorage 操作进行代理，可以使用 proxy 对象。

const localstorageproxy = new proxy(localstorage, {
  set(target, key, value) {
    target.setitem(key, value);
    const event = new customevent('localstoragechange', { detail: { key, value } });
    window.dispatchevent(event);
    return true;
  }
});

// 设置值时使用代理对象
localstorageproxy.groupid = 'newvalue';

// 监听自定义事件
window.addeventlistener('localstoragechange', function(event) {
  if (event.detail.key === 'groupid') {
    console.log('new value:', event.detail.value);
  }
});

示例：通过 localstorage 监听实现页面间通信

假设我们有两个页面，页面a设置 localstorage 中的 groupid 值，页面b监听 groupid 的变化并根据最新的值执行相应的逻辑。

页面a：设置 localstorage 并触发自定义事件

const sss = (node, data) => {
  let id = data.id.split('_')[1];
  alert(id);

  localstorage.setitem('groupid', id);
  // 手动触发自定义事件
  const event = new customevent('localstoragechange', { detail: { key: 'groupid', value: id } });
  window.dispatchevent(event);
};

页面b：监听自定义事件并获取最新的 groupid 值

mounted() {
  let _this = this;

  // 初次加载时获取数据
  _this.getdata();

  // 使用自定义事件监听 groupid 变化
  window.addeventlistener('localstoragechange', function(event) {
    if (event.detail.key === 'groupid') {
      alert('1');
      _this.getdata();
    }
  });
},

methods: {
  async getdata() {
    const id = localstorage.getitem('groupid');

    // 检查 id 是否存在
    if (!id) {
      this.$message({
        message: 'group id 不存在，请先选择一个组。',
        type: 'warning'
      });
      return;
    }

    try {
      const res = await traffic.trafficvulndel({
        page: this.formdata.page_num,
        size: this.pagesize,
        search: this.formdata.search_field,
        groupid: id,
        ...this.formdata
      });
      
      if (res.code === 200) {
        this.tabledata = res.data.assetsinfo;
        console.log(this.tabledata, 'this.tabledata');
        this.totalpage = res.data.count;
      } else {
        this.$message({
          message: res.msg,
          type: 'error'
        });
      }
    } catch (error) {
      console.log(error);
      this.$message({
        message: '请求失败，请稍后再试。',
        type: 'error'
      });
    }
  }
}

以上就是javascript实时监听localstorage变化的实现方法小结的详细内容，更多关于javascript监听localstorage变化的资料请关注代码网其它相关文章！

JavaScript实时监听localStorage变化的实现方法小结

2024年07月03日 • Javascript •我要评论