vue监听页面缓存事件
Mosowe 人气:0监听页面缓存事件
事情的起因是这样的
项目中需要用到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 }) );
以上就是全部代。仅为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容