使用sessionStorage解决vuex在页面刷新后数据被清除的问题


Posted in Javascript onApril 13, 2018

1.原因

使用sessionStorage解决vuex在页面刷新后数据被清除的问题

2.解决方法

使用sessionStorage解决vuex在页面刷新后数据被清除的问题

localStorage没有时间期限,除非将它移除,sessionStorage即会话,当浏览器关闭时会话结束,有时间期限,具有自行百度

我这里使用sessionStorage,这里需要注意的是vuex中的变量是响应式的,而sessionStorage不是,当你改变vuex中的状态,组件会检测到改变,而sessionStorage就不会了,页面要重新刷新才可以看到改变,所以应让vuex中的状态从sessionStorage中得到,这样组件就可以响应式的变化

3.具体实现

应用背景是用户登入后保存状态,退出后移除状态

mutations.js

ADD_LOGIN_USER (state,data) { //登入,保存状态 
 sessionStorage.setItem("username", data); //添加到sessionStorage 
 sessionStorage.setItem("isLogin",true); 
 state.username=data,  //同步的改变store中的状态 
 state.isLogin=true 
 }, 
 SIGN_OUT (state) { //退出,删除状态 
 sessionStorage.removeItem("username"); //移除sessionStorage 
 sessionStorage.removeItem("isLogin"); 
 state.username=''  //同步的改变story中的状态 
 state.isLogin=false 
 }

getters.js

isLogin (state) { 
 if (!state.isLogin) { 
  state.isLogin=sessionStorage.getItem('isLogin'); //从sessionStorage中读取状态 
  state.username=sessionStorage.getItem('username'); 
 } 
 return state.username 
 }

总体的实现思路是让vuex中story的状态和sessionStorage保持一致(从sessionStorage取值)

4.后话

之前踩了一个大坑,没注意到vuex可以让组件响应式变化,让组件直接取了sessionStorage的值,弄的我还必须刷新才能看到退出后的效果。

补充:

下面看戏vuex存储和本地存储(localstorage、sessionstorage)的区别

1.最重要的区别:vuex存储在内存,localstorage则以文件的方式存储在本地

2.应用场景:vuex用于组件之间的传值,localstorage则主要用于不同页面之间的传值。

3.永久性:当刷新页面时vuex存储的值会丢失,localstorage不会。

注:很多同学觉得用localstorage可以代替vuex, 对于不变的数据确实可以,但是当两个组件共用一个数据源(对象或数组)时,如果其中一个组件改变了该数据源,希望另一个组件响应该变化时,localstorage无法做到,原因就是区别1。

总结

以上所述是小编给大家介绍的vuex在页面刷新后数据被清除问题的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery实现用方向键控制层的上下左右移动
Jan 13 Javascript
js复制到剪切板的实例方法
Jun 28 Javascript
关于js遍历表格的实例
Jul 10 Javascript
JavaScript对象之深度克隆介绍
Dec 08 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
Mar 18 Javascript
jquery实现全屏滚动
Dec 28 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
Jan 26 Javascript
Bootstrap表单制作代码
Mar 17 Javascript
在 Angular 中实现搜索关键字高亮示例
Mar 21 Javascript
vue.js根据代码运行环境选择baseurl的方法
Feb 28 Javascript
JS中的回调函数实例浅析
Mar 21 Javascript
Vue动态创建注册component的实例代码
Jun 14 Javascript
如何编写一个d.ts文件的步骤详解
Apr 13 #Javascript
VSCode中如何利用d.ts文件进行js智能提示
Apr 13 #Javascript
Vue2.0 实现单选互斥的方法
Apr 13 #Javascript
Vue render深入开发讲解
Apr 13 #Javascript
用vue2.0实现点击选中active其他选项互斥的效果
Apr 12 #Javascript
vue组件的写法汇总
Apr 12 #Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 #jQuery
You might like
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
javascript函数中的arguments参数
2010/08/01 Javascript
Javascript 中的 call 和 apply使用介绍
2012/02/22 Javascript
jQuery is()函数用法3例
2014/05/06 Javascript
nodejs实现HTTPS发起POST请求
2015/04/23 NodeJs
javascript实现模拟时钟的方法
2015/05/13 Javascript
Angularjs实现多个页面共享数据的方式
2016/03/29 Javascript
JavaScript的字符串方法汇总
2016/07/31 Javascript
jQuery实现表格元素动态创建功能
2017/01/09 Javascript
vue中appear的用法
2017/08/17 Javascript
vue-router实现组件间的跳转(参数传递)
2017/11/07 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
2017/11/13 jQuery
基于jquery.page.js实现分页效果
2018/01/01 jQuery
使用use注册Vue全局组件和全局指令的方法
2018/03/08 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
2018/07/25 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
2018/08/20 Javascript
jquery实现购物车基本功能
2019/10/25 jQuery
有趣的JavaScript隐式类型转换操作实例分析
2020/05/02 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
2020/08/04 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
用Python和MD5实现网站挂马检测程序
2014/03/13 Python
Python3如何解决字符编码问题详解
2017/04/23 Python
python读取视频流提取视频帧的两种方法
2020/10/22 Python
python 批量修改/替换数据的实例
2018/07/25 Python
程序员的七夕用30行代码让Python化身表白神器
2019/08/07 Python
Jupyter加载文件的实现方法
2020/04/14 Python
导出HTML5 Canvas图片并上传服务器功能
2019/08/16 HTML / CSS
泰国Robinson百货官网:购买知名品牌的商品
2020/02/08 全球购物
科室工作的个人自我评价
2013/10/30 职场文书
机械设计专业应届生求职信
2013/11/21 职场文书
学校后勤岗位职责
2014/02/19 职场文书
《三顾茅庐》教学反思
2014/04/10 职场文书
企业金融服务方案
2014/06/03 职场文书
中药学自荐信
2014/06/15 职场文书
公司酒会主持词
2015/07/02 职场文书
如何利用JavaScript实现二叉搜索树
2021/04/02 Javascript