使用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 相关文章推荐
javascript脚本编程解决考试分数统计问题
Oct 18 Javascript
JavaScript 继承详解 第一篇
Aug 30 Javascript
javascript 时间比较实现代码
Oct 28 Javascript
通过JavaScript控制字体大小的代码
Oct 04 Javascript
JS刷新框架外页面七种实现代码
Feb 18 Javascript
JavaScript中的some()方法使用详解
Jun 09 Javascript
总结十个Angular.js由浅入深的面试问题
Aug 26 Javascript
Ionic项目中Native Camera的使用方法
Jun 07 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
Jul 12 Javascript
webpack实现热加载自动刷新的方法
Jul 30 Javascript
解决node-sass偶尔安装失败的方法小结
Dec 05 Javascript
微信小程序开发(二):页面跳转并传参操作示例
Jun 01 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制作静态网站的模板框架(四)
2006/10/09 PHP
Discuz 6.0+ 批量注册用户名
2009/09/13 PHP
深入php之规范编程命名小结
2013/05/15 PHP
ThinkPHP整合百度Ueditor图文教程
2014/10/21 PHP
php实现搜索类封装示例
2016/03/31 PHP
PHP学习笔记之php文件操作
2016/06/03 PHP
php数据序列化测试实例详解
2017/08/12 PHP
PHP小程序支付功能完整版【基于thinkPHP】
2019/03/26 PHP
php如何把表单内容提交到数据库
2019/07/08 PHP
php获取小程序码的实现代码(B类接口)
2020/06/13 PHP
Js的MessageBox
2006/12/03 Javascript
javascript下给元素添加事件的方法与代码
2007/08/13 Javascript
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
2009/12/28 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
2014/08/08 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
如何让一个json文件显示在表格里【实现代码】
2016/05/09 Javascript
js实现加载更多功能实例
2016/10/27 Javascript
捕获未处理的Promise错误方法
2017/10/13 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
2018/11/23 Javascript
React 组件渲染和更新的实现代码示例
2019/02/21 Javascript
Python入门及进阶笔记 Python 内置函数小结
2014/08/09 Python
Python+Pika+RabbitMQ环境部署及实现工作队列的实例教程
2016/06/29 Python
Python实现栈和队列的简单操作方法示例
2019/11/29 Python
Python sqlite3查询操作过程解析
2020/02/20 Python
python中wheel的用法整理
2020/06/15 Python
CSS3绘制圆角矩形的简单示例
2015/09/28 HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
2016/12/03 HTML / CSS
HTML5拍照和摄像机功能实战详解
2019/01/24 HTML / CSS
Rhone官方网站:男士运动服装、健身服装和高级运动服
2019/05/01 全球购物
超级英雄、电影和电视、乐队和音乐T恤:Loud Clothing
2019/09/01 全球购物
几道Web/Ajax的面试题
2016/11/05 面试题
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
企业党建工作汇报材料
2014/08/19 职场文书
2015年乡镇工作总结范文
2015/04/22 职场文书
2015年语文教师工作总结
2015/05/25 职场文书
求职自荐信该如何书写?
2019/06/24 职场文书