移动端 无法监听 页面刷新或关闭 beforeunload无效 解决方案

解决思路

通过监听页面刷新或者关闭来将vuex里面的数据保存到sessionStorage里,在页面加载时读取sessionStorage里的状态信息,更新vuex的数据。

created () {
      //在页面加载时读取sessionStorage里的状态信息
      if (sessionStorage.getItem("store") ) {
          this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
      }
      //在页面刷新时将vuex里的信息保存到sessionStorage里
      // window.addEventListener("beforeunload",()=>{    // 修改之前监听beforeunload方法
      window.addEventListener("pagehide",()=>{
          sessionStorage.setItem("store",JSON.stringify(this.$store.state))
      })
    },

将 beforeunload 替换成 pagehide 就能解决这个问题 

补充说明

1、pageshow事件:这个事件在用户浏览网页时触发,pageshow 事件类似于 onload 事件,onload 事件在页面第一次加载时触发, pageshow 事件在每次加载页面时触发,即 onload 事件在页面从浏览器缓存中读取时不触发。
2、pagehide事件:该事件会在用户离开网页时触发。离开网页有多种方式。如点击一个链接,刷新页面,提交表单,关闭浏览器等。pagehide 事件有时可以替代 unload事件,但 unload 事件触发后无法缓存页面。

 

参考 跳转 写在自己博客只是为了方便自己浏览

 

posted @ 2021-07-21 20:36  想上天与太阳并肩  阅读(1163)  评论(0编辑  收藏  举报