vuex页面刷新后数据丢失的方法
更新时间：2019年01月17日 08:26:56 作者：jrue
这篇文章主要介绍了vuex页面刷新后数据丢失的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
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;
}
};
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
element组件中自定义组件的样式不生效问题(vue scoped scss无效)
这篇文章主要介绍了解决element组件中自定义组件的样式不生效问题(vue scoped scss无效)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据,localStorage 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去删除,本文给大家介绍Vue3封装localStorage-基本使用,感兴趣的朋友一起看看吧2023-12-12
这篇文章主要介绍了Vue终端取消vue、prettier警告warn问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了vue中ref标签属性和$ref的关系，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
最近在利用springboot+vue整合开发一个前后端分离的个人博客网站，所以这一篇总结一下在开发中遇到的一个问题，关于解决在使用vue和springboot在开发前后端分离的项目时，如何解决跨域问题。在这里分别分享两种方法，分别在前端vue中解决和在后台springboot中解决。2021-10-10
今天小编就为大家分享一篇关于vue2强制刷新,解决页面不会重新渲染的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
vue this.$router.go(-1);返回时如何带参数
这篇文章主要介绍了vue this.$router.go(-1);返回时如何带参数问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
这篇文章主要介绍了vue页面跳转实现页面缓存操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要为大家详细介绍了vue extend+promise封装全局弹窗组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了vue初尝试--项目结构的相关知识,需要的朋友可以参考下2018-01-01
最新评论