vue如何在页面刷新时保留状态信息

本篇转载至来自简书，仅供自己学习用。

1、通过本地存储 state中的数据，页面刷新成功后再次从本地存储中读取state数据
// vuex中的数据发生改变时触发localStorage的存储操作

localstorage.setItem('state', JSON.stringify(this.$store.state))

// 页面加载的时候在created中获取本地存储中的数据
localStorage.getItem('state') && this.$store.replaceState(JSON.parse(localStorage.getItem('state')));
注意：该操作会频繁的触发localStorage的存取工作

2、 监听页面刷新，触发存取操作
首先在入口组件App.vue中的created中利用localstorage或者sessionStorage来存取state中的数据

// 在页面加载时读取sessionStorage里的状态信息

if ( sessionStorage.getItem('state') ) {
  this.$store.replaceState( Object.assign( {}, this.$store.state,
  JSON.parse(sessionStorage.getItem('state') ) ) )
}

// 页面刷新时将state数据存储到sessionStorage中

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

注意：Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象
vuex状态保留
到这里，我们在PC端、安卓端、mac端safair浏览器中均能正常访问，但是在ios端的safair浏览器中存在问题，页面刷新后拿不到数据。

原因：在ios端beforeunload方法未执行，造成state数据未存储到本地，通过查询ios官方文档，文档中说unload和beforeunload已经废弃，使用pagehide作为代替

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

这样一番改动后，果然在PC端、安卓端、ios端均未出现问题

// 会话历史事件

pageshow事件：在用户访问页面时触发；pageshow 事件类似于 onload 事件，onload 事件在页面第一次加载时触发， pageshow 事件在每次加载页面时触发，即 onload 事件在页面从浏览器缓存中读取时不触发。

pagehide事件：在用户离开当前网页时触发；pagehide 事件有时可以替代 unload事件，但 unload 事件触发后无法缓存页面。

作者：苦咖啡Li
链接：

https://www.jianshu.com/p/d3d8cbee46c0

来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。