vue单页面应用刷新网页后vuex的state数据丢失问题以及beforeunload的兼容性

Posted lwming

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue单页面应用刷新网页后vuex的state数据丢失问题以及beforeunload的兼容性相关的知识,希望对你有一定的参考价值。

最近在用vue写h5项目,当使用window.location重定向页面或者刷新当前页面时, 发现当刷新网页后,保存在vuex实例store里的数据会丢失。

后来在网上查找大神的解决方案如下:

export default {
  name: ‘App‘,
  created () {
    //在页面加载时读取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))
    })
  }
}

拿到大神的解决方案后,马上在Chrome上调式,页面刷新后vuex实例数据确实不会消失,当时很庆幸解决了此问题,但是第二天,我用手机调试功能时,发现vuex管理的数据还是丢失了。才发现beforeunload在移动端存在兼容性问题(beforeunload对于移动端浏览器而言(Safari, Opera Mobile等)而言不支持beforeunload事件)。

没办法,因为项目赶,只能老老实实把丢失的数据用localStorage存储本地,然后利用页面的事件把数据存起来,再使用vue的生命周期删除存储的数据,该方法确实不怎么理想,但总算解决了数据丢失问题。

(localStorage用法如下):

    localStorage.setItem("key","value");//以“key”为名称存储一个值“value”

    localStorage.getItem("key");//获取名称为“key”的值

    localStorage.removeItem("key");//删除名称为“key”的信息。

    localStorage.clear();?//清空localStorage中所有信息

 

对于使用vue开发PC端,刷新网页后vuex的state数据丢失问题使用大神的解决方案可以解决此问题,但是移动端网页还是绕其他方法吧

以上是关于vue单页面应用刷新网页后vuex的state数据丢失问题以及beforeunload的兼容性的主要内容,如果未能解决你的问题,请参考以下文章

Vue 刷新网页后 vuex 的 state 数据丢失的解决方案

解决vue单页面刷新后vuex中数据恢复初始值的问题

vuex页面刷新数据丢失的解决办法

Vuex持久化 &vue组件设置背景色

vue常见问题处理 -- 页面刷新时,如何保持原有vuex中的state信息

Vuex刷新时数据会消失,那如何解决?为什么还要使用Vuex