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 事件触发后无法缓存页面。