vue监听sessionStorage
时间: 2023-09-22 10:05:09 浏览: 113
解决vue刷新页面以后丢失store的数据问题
5星 · 资源好评率100%
在 Vue 中,可以使用 $watch 方法来监听 sessionStorage 的变化。
首先,在 Vue 实例中定义一个名为 sessionStorage 的 data 属性,并在 created 钩子函数中初始化它。
```javascript
new Vue({
data: {
sessionStorage: JSON.parse(sessionStorage.getItem('yourKey'))
},
created() {
this.$watch('sessionStorage', (newValue, oldValue) => {
sessionStorage.setItem('yourKey', JSON.stringify(newValue));
}, { deep: true });
}
});
```
然后,使用 $watch 方法来监听 sessionStorage 属性的变化。在监听回调函数中,使用 sessionStorage.setItem() 方法来更新 sessionStorage。
当然你也可以使用 vuex 实现,通过在 Vuex 中使用插件来监听 sessionStorage 的变化。
阅读全文