vuex页面刷新后数据丢失的方法

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vuex页面刷新后数据丢失的方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1739字，纯文字阅读大概需要3分钟。

内容图文

1. 原因

（1）js代码是运行在内存中的，代码运行时的所有变量、函数都是保存在内存中。
（2）刷新页面，以前申请的内存被释放，重新加载脚本代码，变量要重新赋值。
（3）要想刷新后数据不丢失就必须把数据存储在外部，例如：Local Storage、Session Storage、Index DB等。这些都是浏览器提供的API，让你可以将数据存储在硬盘上，做持久化存储。

2. HTML5提供的2种客户端存储数据的新方法

localStorage存储数据：

（1）存储的数据是永久性的，永不过期；
（2）作用域是限定在文档源级别的。同源的文档间共享同样的localStorage数据（不论该源的脚本是否真正的访问localStorage）。
他们可以互相读取对方的数据，甚至可以覆盖对方的数据。但是，非同源的文档间互相都不能读取或者覆盖对方的数据。（即使他们运行的脚本是来自同一台第三方的服务器也不行）。

sessionStorage存储数据：

（1）会话，当浏览器关闭时会话结束并清除数据，有时间期限；
（2）存储数据的有效期和存储数据的脚本所在的最顶层的窗口或者是浏览器标签页是一样的，一旦窗口或者标签页被永久关闭了，

那么所有通过sessionStorage存储的数据也都被删除了。

3.具体实现（登入后保存状态，退出后移除状态）

// vuex mutations
const mutations = {
  setToken(state, token) {
    // 保存用户认证Token
    sessionStorage.setItem('token', token);
    state.token = token;
  },
  setUser(state, user) {
    // 保存用户信息
    sessionStorage.setItem('user', JSON.stringify(user));
    state.user = user;
  },
  // 注销登录，清除token
  logout(state) {
    state.token = null;
    state.user = null;
    sessionStorage.removeItem('token');
    sessionStorage.removeItem('user');
  }
};

// vuex getters
const getters = {
  getToken(state){
    if(state.token === null){
      state.token = sessionStorage.getItem('token')
    }
    return state.token;
  },
  // 获取当前用户登录信息
  getUser(state) {
    if(state.user === null) {
      state.user = JSON.parse(sessionStorage.getItem('user'));
    }
    return state.user;
  }
};

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

内容总结

以上是互联网集市为您收集整理的vuex页面刷新后数据丢失的方法全部内容，希望文章能够帮你解决vuex页面刷新后数据丢失的方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---