- vue项目中，我们有时将数据存到sessionStorage中，但是当某些组件取sessionStorage中的值时，并不能取到最新的更新后值。
所以我们要对sessionStorage进行监听。当seesionStorage的值发生改变时，组件中sessionStorage的值也跟着实时更新。
- 在main.js中给Vue.protorype注册一个全局方法。
其中'lang'为我们想要监听的sessionStorage的key值
// 全局注册事件 监听session 变化
Vue.prototype.resetSetItem = function (key, newVal) {
if (key === 'lang') {
// 创建一个StorageEvent事件
var newStorageEvent = document.createEvent('StorageEvent');
const storage = {
setItem: function (k, val) {
sessionStorage.setItem(k, val);
// 初始化创建的事件
newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null);
// 派发对象
window.dispatchEvent(newStorageEvent)
}
}
return storage.setItem(key, newVal);
}
}
- 给sessionStorage存值
this.resetSetItem('lang', this.lang);
- 监听sessionStorage变化
// 添加对 sessionStorage 的监听
window.addEventListener("setItem", () => {
// 当sessionStorage 中的lang值发生变化， 给组件中的值重新赋值
this.lang = sessionStorage.getItem("lang")
});
