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 相关文章推荐
在Ajax中使用Flash实现跨域数据读取的实现方法
Dec 02 Javascript
JS阻止用户多次提交示例代码
Mar 26 Javascript
javascript原型继承工作原理和实例详解
Apr 07 Javascript
jQuery动态增减行的实例代码解析(推荐)
Dec 05 Javascript
jQuery事件详解
Feb 23 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 jQuery
React Native中导航组件react-navigation跨tab路由处理详解
Oct 31 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
Mar 01 Javascript
Vue用v-for给src属性赋值的方法
Mar 03 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
May 07 Javascript
Vue.directive 实现元素scroll逻辑复用
Nov 29 Javascript
JavaScript console的使用方法实例分析
Apr 28 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
php magic_quotes_gpc的一点认识与分析
2008/08/18 PHP
PHP和Mysqlweb应用开发核心技术-第1部分 Php基础-2 php语言介绍
2011/07/03 PHP
深入解析php中的foreach问题
2013/06/30 PHP
php获取发送给用户的header信息的方法
2015/03/16 PHP
php结合ACCESS的跨库查询功能
2015/06/12 PHP
10个值得深思的PHP面试题
2016/11/14 PHP
php过滤输入操作之htmlentities与htmlspecialchars用法分析
2017/02/17 PHP
CI框架(CodeIgniter)实现的导入、导出数据操作示例
2018/05/24 PHP
php进程(线程)通信基础之System V共享内存简单实例分析
2019/11/09 PHP
服务器安全设置的几个注册表设置
2007/07/28 Javascript
javascript scrollTop正解使用方法
2013/11/14 Javascript
jquery的幻灯片图片切换效果代码分享
2015/09/07 Javascript
基于JavaScript实现动态添加删除表格的行
2016/02/01 Javascript
JavaScript模拟鼠标右键菜单效果
2020/12/08 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
window.open不被拦截的简单实现代码(推荐)
2016/08/04 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
微信小程序实现多选框全选与取消全选功能示例
2019/05/14 Javascript
理解JavaScript中的Proxy 与 Reflection API
2020/09/21 Javascript
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
python中pass语句用法实例分析
2015/04/30 Python
Tensorflow Summary用法学习笔记
2020/01/10 Python
将数据集制作成VOC数据集格式的实例
2020/02/17 Python
tensorflow实现残差网络方式(mnist数据集)
2020/05/26 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
I.T中国官网:精选时尚设计师单品网购平台
2018/03/26 全球购物
日本订房网站,预订日本星级酒店/温泉旅馆:Relux(支持中文)
2020/01/03 全球购物
Can a struct inherit from another class? (结构体能继承类吗)
2014/07/22 面试题
小组合作学习反思
2014/02/18 职场文书
公开承诺书格式
2014/05/21 职场文书
项目申报专员岗位职责
2014/07/09 职场文书
歌咏比赛主持词
2015/06/29 职场文书
《别在吃苦的年纪选择安逸》读后感3篇
2019/11/30 职场文书
Python上下文管理器Content Manager
2021/06/26 Python
使用springMVC所需要的pom配置
2021/09/15 Java/Android