背景介绍

在前端开发中，我们经常需要在不同页面或不同标签页之间共享数据。localStorage是浏览器提供的一种持久化存储机制，可以在不同页面之间共享数据。但有时候，我们需要实时监听这些数据的变化，以便及时更新页面内容。本文将介绍如何监测本地localStorage的数值变化。

实现原理

浏览器提供了storage事件，当localStorage中的数据发生变化时，会触发该事件。需要注意的是，该事件只会在数据发生变化的页面以外的其他页面触发，即如果在当前页面修改了localStorage的值，当前页面不会触发storage事件，但其他打开的同域名页面会触发该事件。

代码实现

1
2
3
4
5
6
7
8
9
10
11
12
// 监听localStorage变化
window.addEventListener('storage', function(event) {
  // 检查是否是我们关心的键发生了变化
  if (event.key === 'curServer') { 
    console.log('localStorage key "curServer" changed from:', event.oldValue, 'to:', event.newValue);
    
    // 根据新值重新加载表格数据
    table.reload('var-table', {
      url: MODULE_PATH + '/' + window.localStorage.getItem("curServer") + '/globalVariables'
    });
  }
});

应用场景

这种技术在以下场景特别有用：

  1. 多标签页应用：用户在一个标签页中修改了设置，其他标签页需要同步更新
  2. 实时数据同步：不同页面需要共享同一份数据，并在数据变化时同步更新
  3. 用户偏好设置：用户更改了主题、语言等偏好设置，所有打开的页面都需要立即应用新设置

关于表格重载

在使用表格组件（如Layui Table）时，表格初始化后的URL是固定的。如果数据源发生变化，需要通过table.reload()方法重新指定URL并刷新表格：

1
2
3
4
// 重载表格，更新数据源URL
table.reload('table-id', {
  url: '新的数据源URL'  // 动态构建新的URL
});

注意事项

  1. storage事件只在值真正改变时触发，如果设置的值与原值相同，则不会触发事件
  2. 该事件不会在触发变化的当前页面中触发，只会在同域名的其他页面中触发
  3. 事件对象包含以下有用的属性：
    • key: 发生变化的键名
    • oldValue: 变化前的值
    • newValue: 变化后的值
    • storageArea: 指向发生变化的 Storage 对象
    • url: 触发该变化的页面的URL

通过这种方式，我们可以实现不同页面间的数据实时同步，提升用户体验。