vue关闭页面刷新页面清除缓存

最新推荐文章于 2024-11-21 16:09:30 发布

weixin_42467138

最新推荐文章于 2024-11-21 16:09:30 发布

阅读量3.5k

点赞数

文章标签：缓存 vue.js

本文链接：https://blog.csdn.net/weixin_42467138/article/details/119946040

版权

本文介绍了如何在Vue组件的mounted和destroyed生命周期钩子中管理页面的缓存清除。通过监听'beforeunload'、'unload'和'load'事件，实现页面关闭、刷新时的数据清理，包括Vuex状态、sessionStorage和localStorage的清除，确保页面状态的正确切换。

摘要由CSDN通过智能技术生成

mounted() {
    this.enterPage()


},

destroyed(){
    this.leavePage()
},

methods: {

/* 打开:load
关闭:beforeload+unload
刷新:beforeload+unload+load*/

//离开清除监听
leavePage(){
    window.removeEventListener('beforeload', e => this.beforeunloadHandler(e))
    window.removeEventListener('unload', e => this.onunload(e))
    window.removeEventListener('load', e => this.load(e))
},
//页面进入监听
enterPage(){
    let is_fireFox = navigator.userAgent.indexOf("Firefox")>-1;//是否是火狐浏览器
    this.is_fireFox = is_fireFox
    //添加监听事件
    if(is_fireFox){
        window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
        window.addEventListener('unload', e => this.onunload(e))
    }else {
        window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
        window.addEventListener('unload', e &