在不同窗口/选项卡中监听 localStorage 变化
当 localStorage 的数据在一个窗口/选项卡中改变时，其他同源的窗口/选项卡会触发 storage 事件。我们可以利用这个事件来监听 localStorage 的变化。
示例代码
1 2 3 4 5 6 | // 添加 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并触发自定义事件
1 2 3 4 5 | function setLocalStorageItem(key, value) { localStorage.setItem(key, value); const event = new CustomEvent('localStorageChange', { detail: { key, value } }); window.dispatchEvent(event);} |
- 监听自定义事件
1 2 3 4 5 | window.addEventListener('localStorageChange', function(event) { if (event.detail.key === 'groupID') { console.log('New value:', event.detail.value); }}); |
方法二：使用定时器轮询
另一种方法是在一定时间间隔内轮询 localStorage 的值，检查是否发生变化。
1 2 3 4 5 6 7 8 9 | 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 对象。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | 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 并触发自定义事件
1 2 3 4 5 6 7 8 9 | 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 值
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | 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变化的资料请关注IT俱乐部其它相关文章！
