vue监听localstorage变化

// 在 Vue 组件中监听 localStorage 变化

export default {
  mounted() {
    // 监听 storage 事件，当其他标签页或窗口中的 localStorage 发生变化时触发
    window.addEventListener('storage', this.handleStorageChange);
  },
  beforeDestroy() {
    // 组件销毁前移除事件监听器，防止内存泄漏
    window.addEventListener('storage', this.handleStorageChange);
  },
  methods: {
    handleStorageChange(event) {
      // event.key 是发生变化的键名
      // event.newValue 是新的值
      // event.oldValue 是旧的值
      console.log('LocalStorage changed:', event);

      // 根据需要处理变化
      if (event.key === 'someKey') {
        // 执行相应的操作
        console.log('The value of "someKey" has changed to:', event.newValue);
      }
    }
  }
}

解释说明：

1. mounted() 钩子：在组件挂载后，添加 storage 事件监听器。当其他浏览器标签页或窗口中的 localStorage 发生变化时，会触发该事件。
2. beforeDestroy() 钩子：在组件销毁前移除事件监听器，防止内存泄漏。
3. handleStorageChange(event) 方法：当 localStorage 发生变化时，该方法会被调用，并接收一个 event 对象。你可以通过 event.key、event.newValue 和 event.oldValue 来获取变化的详细信息。
4. 注意事项：storage 事件只能捕获其他标签页或窗口中的 localStorage 变化，无法捕获当前页面对 localStorage 的修改。