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中加号(+)操作符的一些神奇作用
Jun 06 Javascript
详解JavaScript中的blink()方法的使用
Jun 08 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
Jul 20 Javascript
js正则表达式中exec用法实例
Jul 23 Javascript
原生JavaScript实现Ajax的方法
Apr 07 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
Mar 27 Javascript
AngularJS自定义指令详解(有分页插件代码)
Jun 12 Javascript
JavaScript实现图片无缝滚动效果
Jul 07 Javascript
微信小程序实现顶部选项卡(swiper)
Jun 19 Javascript
利用纯js + transition动画实现移动端web轮播图详解
Sep 10 Javascript
JavaScript队列结构Queue实现过程解析
Mar 07 Javascript
vue组件中实现嵌套子组件案例
Aug 31 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
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
PHP中的gzcompress、gzdeflate、gzencode函数详解
2014/07/29 PHP
PHP实现搜索时记住状态的方法示例
2018/05/11 PHP
JavaScript 克隆数组最简单的方法
2009/02/12 Javascript
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
js中匿名函数的N种写法
2010/09/08 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
2012/10/11 Javascript
ECMAScript中函数function类型
2015/06/03 Javascript
基于jQuery实现搜索关键字自动匹配功能
2020/03/26 Javascript
JS随机打乱数组的方法小结
2016/06/22 Javascript
JavaScript程序中实现继承特性的方式总结
2016/06/24 Javascript
基于EasyUI的基础之上实现树形功能菜单
2017/06/28 Javascript
vue实现通讯录功能
2018/07/14 Javascript
webpack打包多页面的方法
2018/11/30 Javascript
JQuery绑定事件四种实现方法解析
2020/12/02 jQuery
Python编程之属性和方法实例详解
2015/05/19 Python
Python随机生成数据后插入到PostgreSQL
2016/07/28 Python
pyhton列表转换为数组的实例
2018/04/04 Python
解决DataFrame排序sort的问题
2018/06/07 Python
Python接口测试数据库封装实现原理
2020/05/09 Python
Python爬虫简单运用爬取代理IP的实现
2020/12/01 Python
HTML5拖拽功能实现的拼图游戏
2018/07/31 HTML / CSS
Max&Co官网:意大利年轻女性时尚品牌
2017/05/16 全球购物
德国BA保镖药房韩文网:kr.ba.de
2017/09/04 全球购物
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
英国哈罗德园艺:Harrod Horticultural
2020/03/31 全球购物
自荐信结尾
2013/10/27 职场文书
善意的谎言事例
2014/02/15 职场文书
军校大学生个人的自我评价
2014/02/17 职场文书
《木笛》教学反思
2014/03/01 职场文书
毕业论文评语大全
2014/04/29 职场文书
2014办公室副主任四风对照检查材料思想汇报
2014/09/20 职场文书
中国汉字听写大会观后感
2015/06/02 职场文书
婚庆公司开业主持词
2015/06/30 职场文书
公司仓库管理制度
2015/08/04 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书