vue2通过watch监听localStorage的值
时间: 2023-07-20 07:39:29 浏览: 67
在 Vue 2 中,你可以通过 `watch` 函数监听 `localStorage` 的值。以下是示例代码:
```javascript
export default {
data() {
return {
myValue: ''
}
},
mounted() {
// 初始化 myValue 的值
this.myValue = localStorage.getItem('myKey')
// 监听 myValue 的变化
this.$watch('myValue', this.handleMyValueChange)
},
beforeDestroy() {
// 取消监听 myValue 的变化
this.$unwatch('myValue', this.handleMyValueChange)
},
methods: {
handleMyValueChange(value) {
// 将变化后的 myValue 的值保存到 localStorage 中
localStorage.setItem('myKey', value)
}
}
}
```
在上面的代码中,我们在 `mounted` 钩子函数中初始化了 `myValue` 的值,并且使用 `$watch` 函数来监听 `myValue` 的变化。在 `handleMyValueChange` 方法中,我们将变化后的 `myValue` 的值保存到 `localStorage` 中。当组件销毁时,我们使用 `$unwatch` 函数来取消监听 `myValue` 的变化。这样,每当 `localStorage` 中的值发生变化时,组件中的 `myValue` 数据属性也会跟着变化,并且会将变化后的值保存到 `localStorage` 中。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)