zoukankan      html  css  js  c++  java
  • 移动端 无法监听 页面刷新或关闭 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 事件触发后无法缓存页面。

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

  • 相关阅读:
    usually study notebook
    (转)轻松掌握shell编程中数组的常见用法及示例
    (转)python学习链接
    (转)Python作业day2购物车
    (转)python 列表与元组的操作简介
    (转)总结Linux的chattr与lsattr命令详解
    mysql特殊语句学习
    PHP位操作符
    html5中script的async属性
    jquery资源
  • 原文地址:https://www.cnblogs.com/chz1905/p/15041497.html
Copyright © 2011-2022 走看看