原由剖析:
JavaScript代码是运行在内存当中的,代码运行时的变量,函数,也都是保存在内存中的。刷新页面后,之前申请的所有内存会被释放,重新加载JavaScript代码,变量和函数将重新赋值和初始化。因此,刷新页面保留数据就必须使用外部存储——客户端 or 服务器
客户端存储:
1,localStorage
localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。
localStorage.setItem("key", "value"); //以“key”为名称存储一个值“value” localStorage.getItem("key"); //获取名称为“key”的值 localStorage.removeItem("key"); //删除名称为“key”的信息。 localStorage.clear(); //清空localStorage中所有信息
2,sessionStorage
sessionStorage仅在当前会话下有效,关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。源生接口可以接受,亦可再次封装来对Object和Array有更好的支持。
sessionStorage.setItem("key", "value"); //以“key”为名称存储一个值“value” sessionStorage.getItem("key"); //获取名称为“key”的值 sessionStorage.removeItem("key"); //删除名称为“key”的信息。 sessionStorage.clear(); //清空sessionStorage中所有信息
3,Cookie
生命期为只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。 存放数据大小为4K左右 。有个数限制(各浏览器不同),一般不能超过20个。与服务器端通信:每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题。但Cookie需要程序员自己封装,源生的Cookie接口不友好(https://www.jb51.net/article/64330.htm)。
vuex中的变量是响应式的,而localStorage不是,当你改变vuex中的状态,组件会检测到改变,而localStorage就不会了,页面要重新刷新才可以看到改变,所以让vuex中的状态从localStorage中得到,这样组件就可以响应式地变化
export default {
state: {
userId: localStorage.getItem('id'),
userName: localStorage.getItem('username'),
token: localStorage.getItem('token'),
email: ''
},
mutations: {
setUserId(state, id) {
state.userId = id
localStorage.setItem('id', id)
},
setUserName(state, name) {
state.userName = name
localStorage.setItem("username", name)
},
setToken(state, token) {
state.token = token
localStorage.setItem('token', token)
},
setEmail(state, email) {
state.email = email
}
},
actions: {
// 登录
handleLogin({ commit }, { userName, password }) {
commit('setUserId', userinfo.id)
commit('setUserName', userinfo.username)
commit('setToken', userinfo.token)
commit('setEmail', userinfo.email)
},
// 退出登录
handleLogOut() {
localStorage.removeItem("id")
localStorage.removeItem("username")
localStorage.removeItem("token")
}
}
}