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

木子童话

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

当

1. localStorage

复制代码

的数据在一个窗口/选项卡中改变时，其他同源的窗口/选项卡会触发

1. storage

复制代码

事件。我们可以利用这个事件来监听

1. localStorage

复制代码

的变化。

示例代码

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

复制代码

解释

• 1. storage

  复制代码
  事件会在同源的其他窗口/选项卡中触发。
  
• 1. event.key

  复制代码
  是变化的
  1. localStorage

  复制代码
  项的键。
  
• 1. event.newValue

  复制代码
  是变化后的新值。
  

注意事项

• 只有在不同的窗口/选项卡之间修改
  1. localStorage

  复制代码
  时，才会触发
  1. storage

  复制代码
  事件。
  
• 如果在同一个窗口/选项卡中修改
  1. localStorage

  复制代码
  ，则不会触发
  1. storage

  复制代码
  事件。
  

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

在同一个窗口/选项卡中，

1. storage

复制代码

事件不会被触发。我们可以通过自定义事件或其他手段来实现对

1. localStorage

复制代码

变化的监听。

方法一：使用自定义事件

• 设置
  1. localStorage

  复制代码
  并触发自定义事件
  

1. function setLocalStorageItem(key, value) {
   
2.   localStorage.setItem(key, value);
   
3.   const event = new CustomEvent('localStorageChange', { detail: { key, value } });
   
4.   window.dispatchEvent(event);
   
5. }

复制代码

• 监听自定义事件
  

1. window.addEventListener('localStorageChange', function(event) {
   
2.   if (event.detail.key === 'groupID') {
   
3.     console.log('New value:', event.detail.value);
   
4.   }
   
5. });

复制代码

方法二：使用定时器轮询

另一种方法是在一定时间间隔内轮询

1. localStorage

复制代码

的值，检查是否发生变化。

1. let lastValue = localStorage.getItem('groupID');
   
2. 
   
3. setInterval(function() {
   
4.   const newValue = localStorage.getItem('groupID');
   
5.   if (newValue !== lastValue) {
   
6.     console.log('New value:', newValue);
   
7.     lastValue = newValue;
   
8.   }
   
9. }, 1000); // 每秒检查一次

复制代码

方法三：使用 Proxy 对象

如果希望对所有的

1. localStorage

复制代码

操作进行代理，可以使用

1. Proxy

复制代码

对象。

1. 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) {
   
2.   if (event.detail.key === 'groupID') {
   
3.     console.log('New value:', event.detail.value);
   
4.   }
   
5. });

复制代码

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

假设我们有两个页面，页面A设置

1. localStorage

复制代码

中的

1. groupID

复制代码

值，页面B监听

1. groupID

复制代码

的变化并根据最新的值执行相应的逻辑。

页面A：设置 localStorage 并触发自定义事件

1. const sss = (node, data) => {
   
2.   let id = data.id.split('_')[1];
   
3.   alert(id);
   
4. 
   
5.   localStorage.setItem('groupID', id);
   
6.   // 手动触发自定义事件
   
7.   const event = new CustomEvent('localStorageChange', { detail: { key: 'groupID', value: id } });
   
8.   window.dispatchEvent(event);
   
9. };

复制代码

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

1. mounted() {
   
2.   let _this = this;
   
3. 
   
4.   // 初次加载时获取数据
   
5.   _this.getData();
   
6. 
   
7.   // 使用自定义事件监听 groupID 变化
   
8.   window.addEventListener('localStorageChange', function(event) {
   
9.     if (event.detail.key === 'groupID') {
   
10.       alert('1');
    
11.       _this.getData();
    
12.     }
    
13.   });
    
14. },
    
15. 
    
16. methods: {
    
17.   async getData() {
    
18.     const id = localStorage.getItem('groupID');
    
19. 
    
20.     // 检查 id 是否存在
    
21.     if (!id) {
    
22.       this.$message({
    
23.         message: 'Group ID 不存在，请先选择一个组。',
    
24.         type: 'warning'
    
25.       });
    
26.       return;
    
27.     }
    
28. 
    
29.     try {
    
30.       const res = await traffic.trafficvulndel({
    
31.         page: this.formData.page_num,
    
32.         size: this.pageSize,
    
33.         search: this.formData.search_field,
    
34.         groupID: id,
    
35.         ...this.formData
    
36.       });
    
37.       
    
38.       if (res.code === 200) {
    
39.         this.tableData = res.data.assetsInfo;
    
40.         console.log(this.tableData, 'this.tableData');
    
41.         this.totalpage = res.data.count;
    
42.       } else {
    
43.         this.$message({
    
44.           message: res.msg,
    
45.           type: 'error'
    
46.         });
    
47.       }
    
48.     } catch (error) {
    
49.       console.log(error);
    
50.       this.$message({
    
51.         message: '请求失败，请稍后再试。',
    
52.         type: 'error'
    
53.       });
    
54.     }
    
55.   }
    
56. }

复制代码

以上就是JavaScript实时监听localStorage变化的实现方法小结的详细内容，更多关于JavaScript监听localStorage变化的资料请关注脚本之家其它相关文章！

来源:https://www.jb51.net/javascript/323513cxa.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！