vue实现页面缓存,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 . create event( storage event )；
常量存储={
setItem: (k，val)={
localStorage.setItem(k，val)；
//初始化创建的事件
newstorageevent . initstorageevent( setItem ，false，false，k，null，val，null，null)；
//发送对象
window . dispatch event(newStorageEvent)；
}
};
返回storage.setItem(key，new val)；
}
};
此时，在其他页面中写入缓存时，不能直接使用localStorage。
你需要这么设置
this . resetsetitem( websocketHistory ，data)；
然后，在要监控的页面中，在创建的函数中使用它。
window . addevent listener( setItem ，()={
console . log(JSON . parse(local storage . getitem( websocketHistory )))；
});
这样，服务器返回的信息可以在app.vue组件中使用并存储在缓存中，列表可以在其他组件中实时更新，比如回复列表页面，包括对话页面。
监听缓存事件代码
随着H5的更新，前端经常使用本地存储来交互处理数据。如果您想要监视缓存更改，下面的代码就是您想要的。
在main创建缓存事件
//侦听缓存事件
vue . prototype . $ addStorageEvent=function(type，key，data) {
if (type===1) {
//创建StorageEvent事件
var newStorageEvent=document . create event( storage event )；
常量存储={
setItem: function(k，val) {
localStorage.setItem(k，val)；
//初始化创建的事件
newstorageevent . initstorageevent(
存储项目，
假的，
假的，
k，
空，
瓦尔，
空，
空
);
//发送对象
window . dispatch event(newStorageEvent)；
},
};
返回storage.setItem(key，data)；
}否则{
//创建StorageEvent事件
var newStorageEvent=document . create event( storage event )；
常量存储={
setItem: function(k，val) {
sessionStorage.setItem(k，val)；
//初始化创建的事件
newstorageevent . initstorageevent(
设置项目，
假的，
假的，
k，
空，
瓦尔，
空，
空
);
//发送对象
window . dispatch event(newStorageEvent)；
},
};
返回storage.setItem(key，data)；
}
};
在组件生命周期中
侦听缓存事件并获取值。
window.addEventListener(
stotageItem，
(e)={//e表示存储的数据{a:1}
解析(英语)
},
错误的
);
在组件业务代码
使用缓存。
这个。$addStorageEvent(0，使用存储，
//写入数据
JSON.stringify({ a:1 })
);
这些都是几代人。只是个人经验，希望能给大家一个参考，也希望大家多多支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。