vue如何监听页面缓存事件 vue如何监听页面缓存事件

监听页面缓存事件

事情的起因是这样的

监听缓存事件

在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);

【vue如何监听页面缓存事件】然后在需要监听的页面中，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); }};

在组件生命周期中
监听缓存事件并取值