监听页面缓存事件
事情的起因是这样的
监听缓存事件代码
在main创建缓存事件
在组件生命周期中
在组件业务代码
监听页面缓存事件 事情的起因是这样的项目中需要用到websocket，在网页刚打开的时候，就要进行对话的连接绑定，就我这菜鸟来说，第一次这么搞事情，也是刚接触websocket没多久，这咋整啊？在App.vue中设置了绑定，所有的信息返回都在app.vue组件里面，但是其他组件怎么去获取？而且需要缓存到本地。而当初我还没接触vuex，所以在其他组件里面获取服务器返回的信息只能借助于localStorage，这就郁闷了，这缓存咋监听呀？
首先在main.js里面配置vue原型：
Vue.prototype.resetSetItem = (key, newVal) => {
if (key === 'websocketHistory') {
// 创建一个StorageEvent事件
let newStorageEvent = document.createEvent('StorageEvent');
const storage = {
setItem: (k, val) => {
localStorage.setItem(k, val);
// 初始化创建的事件
newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null);
// 派发对象
window.dispatchEvent(newStorageEvent);
}
};
return storage.setItem(key, newVal);
}
};
这个时候，在其他页面写入缓存就不能直接用localStorage了
你需要这么设置
this.resetSetItem('websocketHistory', data);
然后在需要监听的页面中，created函数中使用
window.addEventListener('setItem', () => {
console.log(JSON.parse(localStorage.getItem('websocketHistory')));
});
如此，便能在app.vue组件中使用获取服务器返回的信息并存入缓存，在其他组件，比如回话列表页面就可以实时更新列表，包括对话页面。
监听缓存事件代码随着H5的更新，前端经常使用本地存储进行交互处理数据，如果想要监听缓存的变化，以下代码就是您想要的。
在main创建缓存事件// 监听缓存事件
Vue.prototype.$addStorageEvent = function(type, key, data) {
if (type === 1) {
// 创建一个StorageEvent事件
var newStorageEvent = document.createEvent("StorageEvent");
const storage = {
setItem: function(k, val) {
localStorage.setItem(k, val);
// 初始化创建的事件
newStorageEvent.initStorageEvent(
"storageItem",
false,
false,
k,
null,
val,
null,
null
);
// 派发对象
window.dispatchEvent(newStorageEvent);
},
};
return storage.setItem(key, data);
} else {
// 创建一个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, data);
}
};
在组件生命周期中
监听缓存事件并取值
window.addEventListener(
"stotageItem",
(e) => { // e代表存储的数据 { a:1 }
JSON.parse(e.a)
},
false
);
在组件业务代码
进行缓存使用
this.$addStorageEvent(0, "useStorage",
// 写入数据
JSON.stringify({ a:1 })
);
以上就是全部代。仅为个人经验，希望能给大家一个参考，也希望大家多多支持易知道(ezd.cc)。
