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实现一些常用软件的下载导航
Aug 03 Javascript
jQuery实用函数用法总结
Aug 29 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
Dec 08 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
Jun 03 Javascript
详解Vue方法与事件
Mar 09 Javascript
underscore之Chaining_动力节点Java学院整理
Jul 10 Javascript
JavaScript实现的搜索及高亮显示功能示例
Aug 14 Javascript
jqueryUI tab标签页代码分享
Oct 09 jQuery
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
Feb 20 Javascript
vue实现购物车结算功能
Jun 18 Javascript
Vue前端判断数据对象是否为空的实例
Sep 02 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 SplObjectStorage使用实例
2015/05/12 PHP
php实现的用户查询类实例
2015/06/18 PHP
PHP获取某个月最大天数(最后一天)的方法
2015/07/29 PHP
JQuery打造PHP的AJAX表单提交实例
2009/11/03 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
简介JavaScript中的push()方法的使用
2015/06/09 Javascript
jQuery蓝色风格滑动导航栏代码分享
2015/08/19 Javascript
jQuery链式操作实例分析
2015/11/16 Javascript
zTree插件下拉树使用入门教程
2016/04/11 Javascript
jQuery代码性能优化的10种方法
2016/06/21 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
bootstrap suggest下拉框使用详解
2017/04/10 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
2017/12/07 Javascript
详解Vue文档中几个易忽视部分的剖析
2018/03/24 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
js实现简单的无缝轮播效果
2020/09/05 Javascript
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
Python新手实现2048小游戏
2015/03/31 Python
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
python snownlp情感分析简易demo(分享)
2017/06/04 Python
详解python中executemany和序列的使用方法
2017/08/12 Python
详解Python在七牛云平台的应用(一)
2017/12/05 Python
Python自定义函数计算给定日期是该年第几天的方法示例
2019/05/30 Python
Python简单实现区域生长方式
2020/01/16 Python
解决python对齐错误的方法
2020/07/16 Python
Python+kivy BoxLayout布局示例代码详解
2020/12/28 Python
使用python对excel表格处理的一些小功能
2021/01/25 Python
分享8款纯CSS3实现的搜索框功能
2017/09/14 HTML / CSS
奥地利汽车配件店:Pkwteile.at
2017/03/10 全球购物
TIME时代杂志台湾总代理:台时亚洲
2018/10/22 全球购物
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
办公室打字员岗位职责
2014/04/16 职场文书
活动宣传策划方案
2014/05/23 职场文书
志愿者事迹材料
2014/12/26 职场文书
什么是求职信?求职信应包含哪些内容?
2019/08/14 职场文书
浅谈Redis缓冲区机制
2022/06/05 Redis