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

// 添加 storage 事件监听器
window.addEventListener('storage', function(event) {
  if (event.key === 'groupID') {
    console.log('New value:', event.newValue);
  }
});

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);
  }
});

let lastValue = localStorage.getItem('groupID');

setInterval(function() {
  const newValue = localStorage.getItem('groupID');
  if (newValue !== lastValue) {
    console.log('New value:', newValue);
    lastValue = newValue;
  }
}, 1000); // 每秒检查一次

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);
  }
});

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);
};

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'
      });
    }
  }
}