解决移动端无法监听页面刷新或关闭（beforeunload无效）问题

解决移动端无法监听页面刷新或关闭（beforeunload无效）问题

背景

最近公司要更新一下官网，由于时间问题，决定采用vue来开发，由于vue刚刚使用不久，小白一个，期间遇到不少坑，关于页面刷新导致vuex（store）里面的数据消失问题尤为头疼，说一下自己的解决方案。

解决思路

通过监听页面刷新或者关闭来将vuex里面的数据保存到sessionStorage里，在页面加载时读取sessionStorage里的状态信息，更新vuex的数据。话不多说，直接上代码

	//  在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem('store')) {
      this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
    }
    //  在页面刷新时将vuex里的信息保存到sessionStorage里
     window.addEventListener('beforeunload', () => {
       sessionStorage.setItem('store', JSON.stringify(this.$store.state))
     })

在浏览器上调试，果然可以，真香。然后继续后续的开发……
待到提测时间，自己用测试机先跑了一边，发现坏了，真机上根本没用，然后继续debug，打了断点发现真机上的beforeunload事件根本没有执行，导致sessionStorage没有存储信息，所以继续谷歌移动端beforeunload事件，发现大部分人都有过类似情况，但是没找到好的解决办法，没办法只好先用sessionStorage进行存储然后提测（提测在即，官网需要全局存储的数据又不多），然后继续搜索答案。
终于皇天不负有心人，在本人锲而不舍的找寻下（其实也就一两个小时），找到了一个较为满意的答案，既然移动端监听不到beforeunload，找寻一个能取代的API就好，上代码

   window.addEventListener('pagehide', () => {
     sessionStorage.setItem('store', JSON.stringify(this.$store.state))
   })

没错，就是pagehide，完美代替，至此大功基本告成！

补充说明

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