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


Posted in Javascript onJanuary 17, 2019

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
深入理解JavaScript系列(2) 揭秘命名函数表达式
Jan 15 Javascript
JavaScript函数详解
Feb 27 Javascript
jquery实现点击展开列表同时隐藏其他列表
Aug 10 Javascript
js代码实现无缝滚动(文字和图片)
Aug 20 Javascript
JavaScript ParseFloat()方法
Dec 18 Javascript
jQuery属性选择器用法示例
Sep 09 Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 Javascript
利用node.js如何搭建一个简易的即时响应服务器
May 28 Javascript
使用watch监听路由变化和watch监听对象的实例
Feb 24 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
Jul 10 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
Nov 04 Javascript
jquery获取img的src值实例介绍
Jan 16 #jQuery
js中int和string数据类型互相转化实例
Jan 16 #Javascript
JavaScript设计模式之观察者模式实例详解
Jan 16 #Javascript
JavaScript设计模式之命令模式实例分析
Jan 16 #Javascript
js删除数组中某几项的方法总结
Jan 16 #Javascript
JavaScript设计模式之责任链模式实例分析
Jan 16 #Javascript
JavaScript设计模式之代理模式实例分析
Jan 16 #Javascript
You might like
教你在header中隐藏php的版本信息
2016/08/10 PHP
Thinkphp实现短信验证注册功能
2016/10/18 PHP
PHP+MYSQL实现读写分离简单实战
2017/03/13 PHP
PHP count_chars()函数讲解
2019/02/14 PHP
JQuery Tips(4) 一些关于提高JQuery性能的Tips
2009/12/19 Javascript
Jquery实战_读书笔记2 选择器
2010/01/22 Javascript
js Dialog 实践分享
2012/10/22 Javascript
动态加载js和css(外部文件)
2013/04/17 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
js生成随机数的过程解析
2015/11/24 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
[原创]jQuery常用的4种加载方式分析
2016/07/25 Javascript
jQuery序列化后的表单值转换成Json
2017/06/16 jQuery
vue2.0 keep-alive最佳实践
2017/07/06 Javascript
基于vue-resource jsonp跨域问题的解决方法
2018/02/03 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
js实现简单放大镜效果
2020/03/07 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
Python logging模块学习笔记
2014/05/24 Python
Python对数据库操作
2016/03/28 Python
分析Python中解析构建数据知识
2018/01/20 Python
python使用requests.session模拟登录
2019/08/09 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
Python多线程threading创建及使用方法解析
2020/06/17 Python
Easy Spirit官网:美国休闲鞋履中的代表品牌
2019/04/12 全球购物
创联软件面试题笔试题
2012/10/07 面试题
教师自荐信范文
2013/12/09 职场文书
初中数学教学反思
2014/01/16 职场文书
初三化学教学反思
2014/01/23 职场文书
外国人聘用意向书
2014/04/01 职场文书
工作态度检讨书范文
2015/05/06 职场文书
2015年城管个人工作总结
2015/05/15 职场文书
工作证明格式范文
2015/06/15 职场文书
职工的安全责任书范文!
2019/07/02 职场文书
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python
Python访问Redis的详细操作
2021/06/26 Python