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 相关文章推荐
非常不错的功能强大代码简单的管理菜单美化版
Jul 09 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
Jun 13 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
Jul 10 Javascript
基于IView中on-change属性的使用详解
Mar 15 Javascript
使用svg实现动态时钟效果
Jul 17 Javascript
vue 中的keep-alive实例代码
Jul 20 Javascript
详解处理Vue单页面应用SEO的另一种思路
Nov 09 Javascript
JS实现的全选、全不选及反选功能【案例】
Feb 19 Javascript
详解vue项目中调用百度地图API使用方法
Apr 25 Javascript
JS实现数组删除指定元素功能示例
Jun 05 Javascript
在vue-cli中引入lodash.js并使用详解
Nov 13 Javascript
在Vue中使用Echarts实例图的方法实例
Oct 10 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
改德生G88 - 加装等响度低音提升电路
2021/03/02 无线电
php 无限分类的树类代码
2009/12/03 PHP
PHP中PDO基础教程 入门级
2011/09/04 PHP
PHP按行读取、处理较大CSV文件的代码实例
2014/04/09 PHP
PHP实现微信发红包程序
2015/08/24 PHP
php简单随机字符串生成方法示例
2017/04/19 PHP
经常用到的JavasScript事件的翻译
2007/04/09 Javascript
JavaScript实现表格排序方法
2013/06/14 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
2013/10/20 Javascript
提取字符串中年月日的函数代码
2013/11/05 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
2016/08/27 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
2017/09/18 Javascript
基于Vue实现图书管理功能
2017/10/17 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
2017/11/27 Javascript
推荐一个基于Node.js的表单验证库
2019/02/15 Javascript
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
python 实现自动远程登陆scp文件实例代码
2017/03/13 Python
Python守护线程用法实例
2017/06/23 Python
python使用递归的方式建立二叉树
2019/07/03 Python
Django中modelform组件实例用法总结
2020/02/10 Python
Python识别html主要文本框过程解析
2020/02/18 Python
python的列表List求均值和中位数实例
2020/03/03 Python
python代码xml转txt实例
2020/03/10 Python
Django之choices选项和富文本编辑器的使用详解
2020/04/01 Python
Python 炫技操作之合并字典的七种方法
2020/04/10 Python
Python selenium 加载并保存QQ群成员,去除其群主、管理员信息的示例代码
2020/05/28 Python
python如何操作mysql
2020/08/17 Python
捷克领先的户外服装及配件市场零售商:ALPINE PRO
2018/01/09 全球购物
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
个人简历中的自我评价范例
2013/10/29 职场文书
2014年两会学习心得体会
2014/03/10 职场文书
考研经验交流会策划书
2015/11/02 职场文书
HTML+CSS制作心跳特效的实现
2021/05/26 HTML / CSS
解决tk mapper 通用mapper的bug问题
2021/06/16 Java/Android
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL
讲解MySQL增删改操作
2022/05/06 MySQL