Vue刷新后页面数据丢失问题的解决过程

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

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

二、解决思路

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

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

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

分析：

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

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

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

有两种方式可以把值存储到sessionStoage

// 第一种方式，标准方法
sessionStorage.setItem('email','xxx@qq.com');
 
// 第二种方式，直接当成普通对象属性赋值。
sessionStorage.blog = 'http://xxxxxx';

两种获取值的方法

// 1. 标准方法
var email = sessionStorage.getItem('email');
// 2. 直接取属性值
var blog = sessionStorage.blog;

移除key/value

// 移除之后，再获取值，将会得到 undefined
// 根据key，移除键值对
sessionStorage.removeItem('email');

清空sessionStorage

// 全部清除
sessionStorage.clear();
//也可以指定删除
sessionStorage.removeItem('keyName')
 

ps：如果这个key是存储在store里面的，还可以这么写

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))
    })
  }

localStorage的操作方法也同理，这里不再赘述

三、解决方法

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

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

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

具体代码如下： 

created () {
  if (this.$route.query !== {} && typeof (this.$route.query) === 'string') {
    this.userKey = this.$route.query
    sessionStorage.setItem('userkey', this.userKey) //初次收到userKey，存起来
  } else {
    if (sessionStorage.getItem('userkey')) {
      this.userKey = sessionStorage.getItem('userkey') //不是第一次了，取出来
    } else {
      console.log('##userInfo##', store.state.user.userInfo)
  //如果实在是没有了，就直接去store里面取
      this.userKey = store.state.user.userInfo.userKey
      }
  }
  console.log('##userkey##', this.userKey)//检查userKey变没变
  this.getcollect()//调用方法
},
beforeDestroy () {
//毁灭前先移除掉，否则我跳转到其它地方，sessionStorage里面依旧存在着userKey
  sessionStorage.removeItem('userkey')
  },

四、总结

sessionStorage、localStorage、cookie三者的区别：

localStorage -- 是永久存储在本地，除非你主动去删除;【手动删除】

sessionStorage -- 是存储到当前页面关闭为止，和其他tab页没关联;【页面关闭就没有了】

cookie -- 则根据你设置的有效时间来存储，但缺点是不能储存大数据且不易读取，会和后台进行交互。

怎么把一个对象存储到浏览器本地中

利用sessionStorage或者localStorage把对象存到浏览器中;

//保存数据
localStorage.setItem("key", "value");
sessionStorage .setItem("key", "value");
//读取数据：
let lastname = localStorage.getItem("key");
let lastname = sessionStorage .getItem("key");
//删除数据：
localStorage.removeItem("key");
sessionStorage .removeItem("key");

值得注意的是： 

存储的key值只在单页面使用，则选择sessionStorage

存储的key想要在各个页面均能使用，要选择localStorage

Vuex ----状态管理模式 + 库

相当于共享仓库，方便任何组件直接获取和修改。

state - 数据【存项目共享状态，是响应式的，store的数据改变，所有依赖此状态的组件会更新】

$store.state.count

mutations - 方法【同步函数，只建议在这个地方修改数据】

inc(state, 参数唯一) {}

$store.commit('inc', 2)

actions -【异步操作】【提交的是mutations，不直接修改状态】

increment(context, num) {context.commit()}

this.$store.dispatch('',arg)

getters - 包装数据 【store的计算属性，可缓存】

show: function(state) {}

this.$store.getters.show

传参，返回函数：show(state) {return function(参数) {return ...}}【不会缓存数据】

想要存取、修改、删除vuex仓库中的状态数据，需要按照一定的语法规则，比如按照action-->mutaion-->state的规则去增删改查，比如使用辅助函数如增删改查vuex中的数据

总结 

到此这篇关于Vue刷新后页面数据丢失问题解决的文章就介绍到这了,更多相关Vue刷新后页面数据丢失内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论