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;
}
};
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue 组件上的v-model双向绑定原理,从本文的学习可以知道组件上v-model指令的本质也是生成了value属性和input事件，具体实例代码跟随小编一起看看吧2022-05-05
在Web开发中,页面间的跳转及数据刷新是常见问题,通过使用$router.push和$router.replace方法,可以控制页面跳转的行为,具体操作时,若发现页面ID变更后数据未刷新,可通过给router-view标签添加key值解决,若使用keep-alive2024-10-10
这篇文章主要介绍了vue单页面如何解决多个视频同时仅能播放一个问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
Vue.js 中的 v-model 指令及绑定表单元素的方法
这篇文章主要介绍了Vue.js 中的 v-model 指令及绑定表单元素的方法,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-12-12
Vue3中的事件修饰符包括：.stop（阻止冒泡）、.prevent（阻止默认事件）、.self（阻止自身事件）、.capture（打乱冒泡顺序）、.once（事件只触发一次）和.passive（事件默认行为立即执行）,这些修饰符可以帮助开发者更灵活地控制事件的处理方式2025-02-02
这篇文章主要介绍了从0搭建vue-cli4脚手架，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
这篇文章主要介绍了浅谈vant组件Picker 选择器选单选问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章给大家介绍了Vue.js项目部署到服务器的详细步骤，既然是部署到服务器，肯定是需要一个云的。具体思路步骤大家可以参考下本文2017-07-07
在本篇文章里小编给大家整理的是关于Vue代码整洁之去重的相关知识点内容，需要的朋友们学习下。2019-08-08
这篇文章主要介绍了如何使用vue-router为每个路由配置各自的title,及使用vue router的方法，需要的朋友可以参考下2018-07-07
最新评论