首页vue2 监听localstorage值的改变

vue2 监听localstorage值的改变

时间: 2025-01-04 11:40:13 浏览: 58

在 Vue.js 2.x 中监听 localStorage 的值变化，你可以使用 `watch`、`computed` 或者自定义事件 `$emit` 和 `$on` 来实现。这里我们提供两种常见的方法： **方法一：使用 watch** 创建一个响应式的数据属性，并设置 `watch` 对象监听其变化，当 localStorage 中对应的 key 变化时触发回调函数。 ```javascript <template> <div>{{ valueFromLocalStorage }}</div> </template> <script> export default { data() { return { localValue: window.localStorage.getItem('yourKey') || '' }; }, watch: { localValue(newVal, oldVal) { if (newVal !== oldVal) { // 更新你的组件状态或其他操作... console.log('localStorage值已更新'); } }, '$$observedKey': { immediate: true, handler(newValue) { this.localValue = newValue; }}, // 使用全局监听localStorage变化，假设你的key叫'$$observedKey' }, }; </script> ``` **方法二：使用 computed 和 $watch** 通过 `computed` 计算属性结合 `$watch` 实现监听。 ```javascript <template> <div>{{ valueFromLocalStorage }}</div> </template> <script> export default { computed: { valueFromLocalStorage() { return window.localStorage.getItem('yourKey') || ''; }, }, watch: { 'valueFromLocalStorage'(newValue) { // 当监听到值变化时，执行相应操作 console.log('localStorage值已更新'); }, }, }; </script> ``` 注意替换 `'yourKey'` 为你实际需要监听的 localStorage 键名。

阅读全文