解决vuex在页面刷新后数据丢失的问题
2018-05-22 22:41
761 查看
一、原因
js代码是运行在内存中的,代码运行时的所有变量、函数也都是保存在内存中的。刷新页面,以前申请的内存被释放,重新加载脚本代码,变量重新赋值,所以这些数据要想存储就必须存储在外部,例如:Local Storage、Session Storage、Index DB等。这些都是浏览器提供的API,让你可以将数据存储在硬盘上,做持久化存储。具体选择哪一个就根据你实际需求来选择。
二、解决方案
在客户端存储数据:HTML5提供了2种在客户端存储数据的新方法:localStorage没有时间期限,除非将它移除,sessionStorage即会话,当浏览器关闭时会话结束,有时间期限,具有自行百度。
之前,这些都是由cookie完成的,但是cookie不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得cookie速度很慢,而且效率不高。
web存储分为localStorage个sessionStorage。
区别在于存储的有效期和作用域不同。
通过localStorage存储的数据是永久性的,除非web应用刻意删除存储的数据,或者用户通过设置浏览器配置(浏览器提供的特定的UI)来删除,否则数据将一直保存在用户的电脑上,永不过期。
localStorage的作用域是限定在文档源级别的。同源的文档间共享同样的localStorage数据(不论该源的脚本是否真正的访问localStorage)。他们可以互相读取对方的数据,甚至可以覆盖对方的数据。但是,非同源的文档间互相都不能读取或者覆盖对方的数据。(即使他们运行的脚本是来自同一台第三方的服务器也不行)。
sessionStorage存储数据的有效期和存储数据的脚本所在的最顶层的窗口或者是浏览器标签页是一样的,一旦窗口或者标签页被永久关闭了,那么所有通过sessionStorage存储的数据也都被删除了。
我这里使用sessionStorage,这里需要注意的是vuex中的变量是响应式的,而sessionStorage不是,当你改变vuex中的状态,组件会检测到改变,而sessionStorage就不会了,页面要重新刷新才可以看到改变,所以应让vuex中的状态从sessionStorage中得到,这样组件就可以响应式的变化
三、具体实现
应用背景是用户登入后保存状态,退出后移除状态//mutations 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 isLogin (state) { if (!state.isLogin) { state.isLogin=sessionStorage.getItem('isLogin'); //从sessionStorage中读取状态 state.username=sessionStorage.getItem('username'); } return state.isLogin }
总体的实现思路是让vuex中store的状态从sessionStorage取值,并和sessionStorage保持一致
getters:{ userInfo(state){ if(!state.userInfo){ state.userInfo = JSON.parse(sessionStorage.getItem('userInfo')) } return state.userInfo } }, mutations:{ LOGIN:(state,data) => { state.userInfo = data; sessionStorage.setItem('userInfo',JSON.stringify(data)); }, LOGOUT:(state) => { state.userInfo = null; sessionStorage.removeItem('userInfo'); } },
需要注意的是state里的userInfo初始化一定要是null,而不是{},否则那个判断就一直为true啦(个人遇到的一个小问题)
相关文章推荐
- 结合localStorage解决vuex页面刷新数据丢失的问题
- 关于页面刷新vuex数据消失问题解决方案
- 使用sessionStorage解决vuex在页面刷新后数据被清除的问题
- 使用sessionStorage解决vuex在页面刷新后数据被清除的问题
- 通过localStorage解决vuex中的信息页面刷新丢失的问题
- 页面刷新vuex数据消失问题解决方案 之 vuex中间件
- 解决vuex在页面刷新后数据被清除的问题
- SubmitOncePage:解决刷新页面造成的数据重复提交问题
- EF更新,数据库值变化,前台页面并不变化,刷新也不变化,重新运行程序则变化----开发中遇到的问题(已解决)
- 解决后台修改数据后在IE8中刷新网页还是之前的页面的问题
- 页面刷新vuex数据消失问题解决方案
- 在Asp.net 2.0 中禁用页面缓存解决页面刷新(重新加载数据)的问题!
- 解决刷新页面造成的数据重复提交问题
- 页面刷新vuex数据消失问题解决方案
- ajax post请求返回json数据后,页面不需要刷新的问题解决如例
- 解决后台提交表单数据时,重复F5刷新页面出现重复提交数据的问题。
- 关于extjs中的tabpanel的刷新等若干问题,解决tabpanel内页面刷新,更新数据等问题。
- GridView动态添加列之后,导致PostBack(回发)页面数据丢失问题解决
- SubmitOncePage:解决刷新页面造成的数据重复提交问题
- SubmitOncePage:解决刷新页面造成的数据重复提交问题