vue页面刷新时丢失路由数据（Vue刷新后页面数据丢失）

淩亂°似流年 2023-10-08 23:44 21阅读 0赞

### 一、为什么刷新后数据会丢失 ###

vuex存储的数据只是在页面中，相当于全局变量，页面刷新的时候vuex里的数据会重新初始化，导致数据丢失。因为vuex里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，vuex里面的数据就会被重新赋值。

### 二、解决思路 ###

办法一：将vuex中的数据直接保存到浏览器缓存中（sessionStorage、localStorage、cookie）

办法二：在页面刷新的时候再次请求远程数据，使之动态更新vuex数据

办法三：在父页面向后台请求远程数据，并且在页面刷新前将vuex的数据先保存至sessionStorage（以防请求数据量过大页面加载时拿不到返回的数据）

**分析：**

办法一的缺点是不安全，不适用大数据量的存储；

办法二适用于少量的数据，并且不会出现网络延迟；

办法三是要讲的重点，办法二和办法一一起使用。

以上出自：[Vue刷新后页面数据丢失问题的解决过程\_vue.js\_脚本之家 (jb51.net)][Vue_vue.js_ _jb51.net]

**本文选择把路由中的数据存储到sessionStoage**

**存储值的方法**

//标准方法：把数据存入sessionStorage
    sessionStorage.setItem("assessmentInfo",JSON.stringify(assessmentInfo));

**获取值的方法**

标准方法：从sessionStorage取出数据
    
    const assessmentInfo = JSON.parse(sessionStorage.getItem("assessmentInfo"));

### 三、解决方法 ###

**本人选择的是sessionStorage，选择的原因是：**

其一，由于vue是单页面应用，操作都是在一个页面跳转路由，我只需要在当前页面使用key；

其二，使用sessionStorage可以保证打开页面时sessionStorage的数据为空，而如果是localStorage则会读取上一次打开页面的数据。

**具体代码：**

...  
    methods: {
        //接受页面跳转传递的信息
        getRouterInfo() {
          this.pushGateWay = this.$route.params.pushGateWay   //提交问卷路径
          this.pushJumpWay = this.$route.params.pushJumpWay  //提交问卷跳转路径
          if(this.pushGateWay === undefined){  //判断是否接受到数据
            const assessmentInfo = JSON.parse(sessionStorage.getItem("assessmentInfo"));//获取存在sessionStorage中的数据
            this.pushGateWay = assessmentInfo.pushGateWay   //提交问卷路径
            this.pushJumpWay = assessmentInfo.pushJumpWay  //提交问卷跳转路径
          }else{ //如果有数据
            const assessmentInfo = {
              pushGateWay:this.pushGateWay,
              pushJumpWay:this.pushJumpWay,
            }
            sessionStorage.setItem("assessmentInfo",JSON.stringify(assessmentInfo));//把数据存入sessionStorage中
          }
        },
    }
    ...

### 四、总结 ###

**sessionStorage、localStorage、cookie三者的区别：**

> **localStorage** \-- 是永久存储在本地，除非你主动去删除;【手动删除】
> 
> **sessionStorage** \-- 是存储到当前页面关闭为止，和其他tab页没关联;【页面关闭就没有了】
> 
> **cookie** \-- 则根据你设置的有效时间来存储，但缺点是不能储存大数据且不易读取，会和后台进行交互。

[Vue_vue.js_ _jb51.net]: https://www.jb51.net/article/268434.htm