很多时候，我们在A页面通过点击之类的操作获得一个数值，然后拿到B页面使用，我们希望这个值是响应式的，当然你可以使用vue或者react的实现，这篇文章适合想偷懒或者很多后端小伙不愿意去用的使用，效果是差不多的主要是适用于任何基于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'});}}
}
) 修饰的函数)
