vue使用watch监听localStorage中数据
时间: 2023-11-26 10:06:25 浏览: 55
可以通过使用 `watch` 选项监听 localStorage 中的数据变化,具体实现如下:
```js
watch: {
// 监听 localStorage 中的数据变化
myData: {
handler: function (newValue, oldValue) {
// 处理数据变化
console.log('myData changed:', newValue);
},
deep: true // 深度监听
}
},
mounted () {
// 获取 localStorage 中的数据并设置到当前组件的 data 属性中
this.myData = JSON.parse(localStorage.getItem('myData'))
},
methods: {
// 监听 myData 数据变化并将其同步到 localStorage 中
saveData () {
localStorage.setItem('myData', JSON.stringify(this.myData))
}
}
```
在上述代码中,我们使用 `watch` 选项来监听 `myData` 数据的变化。在组件挂载完成后,通过 `localStorage.getItem()` 方法获取 `myData` 数据并设置到当前组件的 `data` 属性中。
当 `myData` 数据发生变化时,`handler` 方法会被触发,并进行相应的处理。在这里我们可以将 `myData` 数据同步到 `localStorage` 中,以便在下次进入页面时能够继续使用。
另外需要注意的是,在监听 `localStorage` 中的数据变化时,需要在 `watch` 选项中将其设置为深度监听,即 `deep: true`,以便能够监听到 `myData` 对象内部属性的变化。