使用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.validate 常用方法及需要注意的问题
Mar 20 Javascript
jquery获取及设置outerhtml的方法
Mar 09 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
Mar 13 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
Dec 22 Javascript
jQuery on()绑定动态元素出现的问题小结
Feb 19 Javascript
Bootstrap每天必学之级联下拉菜单
Mar 27 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
Nov 10 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
Nov 25 Javascript
JavaScript严格模式详解
Jan 16 Javascript
Vue表单控件绑定图文详解
Feb 11 Javascript
vue+axios 拦截器实现统一token的案例
Sep 11 Javascript
jQuery实现查看图片功能
Dec 01 jQuery
如何编写一个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 在线翻译函数代码
2009/05/07 PHP
PHP字符串比较函数strcmp()和strcasecmp()使用总结
2014/11/19 PHP
php中异常处理方法小结
2015/01/09 PHP
php图片上传类 附调用方法
2016/05/15 PHP
Yii 2.0如何使用页面缓存方法示例
2017/05/23 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
比较详细的关于javascript 解析json的代码
2009/12/16 Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
2010/12/11 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
JS实现图片无间断滚动代码汇总
2014/07/30 Javascript
JS实现带提示的星级评分效果完整实例
2015/10/30 Javascript
AngularJS ng-mousedown 指令
2016/08/02 Javascript
JS验证字符串功能
2017/02/22 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
2017/09/18 Javascript
React组件内事件传参实现tab切换的示例代码
2018/07/04 Javascript
Vue动态组件和异步组件原理详解
2019/05/06 Javascript
vue页面更新patch的实现示例
2020/03/25 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
2020/07/09 Javascript
vue 遮罩层阻止默认滚动事件操作
2020/07/28 Javascript
python+selenium+autoit实现文件上传功能
2017/08/23 Python
mac PyCharm添加Python解释器及添加package路径的方法
2018/10/29 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
Python中itertools的用法详解
2020/02/07 Python
Python PIL库图片灰化处理
2020/04/07 Python
python用opencv完成图像分割并进行目标物的提取
2020/05/25 Python
python与c语言的语法有哪些不一样的
2020/09/13 Python
基于Python的身份证验证识别和数据处理详解
2020/11/14 Python
俄罗斯运动鞋商店:Sneakerhead
2018/05/10 全球购物
Pandora德国官网:购买潘多拉手链、戒指、项链和耳环
2020/02/20 全球购物
考博自荐信
2013/10/25 职场文书
运动会通讯稿200字
2014/02/16 职场文书
个人委托书怎么写
2014/04/04 职场文书
会议简讯范文
2015/07/20 职场文书
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android