vue2 watch监听localstorage

Vue 2中的`watch`可以用于监听`localStorage`的变化。你可以创建一个`watcher`，它会指定需要监视的属性和对应的回调函数。当`localStorage`中的数据发生变化时，这个回调就会被触发。

这是一个基本的例子：

data() {
  return {
    storedValue: localStorage.getItem('yourKey') || ''
  }
},
watch: {
  storedValue(newVal, oldVal) {
    // 当 localstorage 中的 'yourKey' 变化时，这里会被调用
    console.log(`存储值已更新，新值：${newVal}`);
    // 这里可以对新的值做进一步处理，比如更新组件内的状态或视图
  }
}

在这个例子中，如果你在其他地方修改了`localStorage['yourKey']`，`storedValue`就会更新，并且`watch`里的回调函数会被调用。

相关问题

vue2 watch监听localStorage

### 实现思路

由于 `localStorage` 变化事件仅限于同源的不同窗口或标签页之间触发，对于单页面应用程序中的组件通信并不适用。为了实现在 Vue 2 中监听 `localStorage` 的变化，可以采用一种间接的方式——通过创建一个响应式的数据属性并利用 `watch` 来监控这个属性的变化[^1]。

具体来说，可以在 Vuex 或者组件内部设置一个状态用于存储来自 `localStorage` 的值，并且每当需要更新该值时（无论是从其他地方修改还是首次加载），都同步到此状态中。接着使用 `watch` 监视器来观察这些状态的变动以便做出相应处理。

另外，考虑到直接监听 `storage` 事件可能不够灵活，还可以考虑构建一个自定义 Hook 函数或者辅助方法来增强功能性和可维护性[^2]。

### 示例代码

下面是一个简单的例子展示如何在 Vue 组件内实现上述逻辑：

// 假设我们想要监听名为 'taskList' 的 key 在 localStorage 中的变化
export default {
  data() {
    return {
      localTaskList: JSON.parse(localStorage.getItem('taskList')) || []
    };
  },
  created() {
    window.addEventListener('storage', this.handleStorageChange);
  },
  destroyed() {
    window.removeEventListener('storage', this.handleStorageChange);
  },
  methods: {
    handleStorageChange(event) {
      if (event.key === 'taskList') {
        const newValue = event.newValue;
        if (newValue !== null) {
          try {
            this.localTaskList = JSON.parse(newValue);
          } catch (_) {}
        }
      }
    }
  },
  watch: {
    localTaskList(newVal, oldVal) {
      // 当 taskList 发生改变时执行某些操作...
      console.log(`localTaskList changed from ${oldVal} to ${newVal}`);
      
      // 同步回 localStorage
      localStorage.setItem('taskList', JSON.stringify(newVal));
    }
  }
};

这段代码展示了怎样在一个 Vue 组件里初始化本地的任务列表 (`localTaskList`) 并将其绑定至 `localStorage` 中对应的键 ('taskList') 上；当检测到来自外部对 `'taskList'` 键的操作时，则会自动刷新组件内的副本。同时，也实现了双向的数据流控制机制：即不仅能够对外部更改作出反应，还能确保任何由用户交互引起的变更都会被保存下来。

vue3 watch监听localstorage

Vue3 中的 `watch` 可以用来监听浏览器的 localStorage 变化，这样当localStorage的数据发生改变时，你的组件会自动更新。以下是基本的步骤：

1. 首先，在 Vue 组件的 data 或者 computed 中定义你想监听的 localStorage 键名：

data() {
  return {
    myStorageValue: window.localStorage.getItem('myKey') || ''
  }
},

2. 使用 `watch` 来监听变化：

watch: {
  // 当 'myKey' 存储的值发生变化时，这个函数会被触发
  'myStorageValue': function (newVal, oldVal) {
    console.log('localStorage value has changed:', newVal);
    // 在这里处理新旧值的变化
  },
  '$route'(to, from) {
    // 如果你想要监听路由变化并影响 localStorage，可以在这里添加相应的逻辑
    this.myStorageValue = JSON.stringify(to.query); // 示例操作
  }
}

在这个例子中，如果 `myKey` 的值从本地存储中获取到或者路由参数变化时，`myStorageValue` 就会重新设置，并调用回调函数。