通过cookie和localstorage实现数据持久化
最近在写vue项目的时候，把登录的用户信息放在Vuex（store）中，但只要页面一刷新，登录时存入Vuex（store）的数据就被清除了，为解决这一问题，我决定将用户登录信息存入cookie中。注意：cookie只能存储非常小的数据，大量的数据可存储于localstorage中
安装插件
使用cookie前，需要安装相应的插件，localstorage无需安装插件
npm install js-cookie --save 封装方法
新建/src/utils/cookie.js (文件夹和文件名可根据自己的习惯命名)
import cookie from 'js-cookie' //导入插件
export function getCookie(key) { //获取，key为要获取的cookie
return cookie.get(key)
}
export function setCookie(key, data) { //设置，key为要设置的cookie名，data为对应的值
return cookie.set(key, data)
}
export function removeCookie(key) { //删除，key为要删除的cookie
return cookie.remove(key)
} 新建/src/utils/storage.js
export function getStorage(key) {
return JSON.parse(localStorage.getItem(key)) //JSON.parse()用于解析Json字符串
}
export function setStorage(key, data) {
localStorage.setItem(key, JSON.stringify(data)) //JSON.stringif()用于将JS对象转换为JSON字符串
}
export function removeStorage(key) {
localStorage.removeItem(key)
} 实战
此实战案例是在vue+mysql实现登录案例的基础上构建的，有需要请自行移步
Vuex（store）
import Vue from 'vue'
import Vuex from 'vuex'
import { getCookie, removeCookie, setCookie } from '../utils/cookie' //导入对应方法
import { getStorage, removeStorage, setStorage } from '../utils/storage'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
username: getCookie('username'),
info: getStorage('info')
},
mutations: {
setCookie(cookie) {
setCookie(cookie.key, cookie.data)
},
removeCookie(key) {
removeCookie(key)
},
setStorage(storage) {
setStorage(storage.key, storage.data)
},
removeStorage(key) {
removeStorage(key)
}
}
}) 对于Vuex（store）方法定义、方法调用、参数传递等知识不了解的，可参考这里，或自行去找文章或视频学习，这里不做赘述，直接使用了
登陆页面
输入用户名和密码，登陆成功时，将用户名存入cookie
<template>
<h2>登录页面</h2>
<el-form ref="form" :model="form" label-width="20%">
<el-form-item label="用户名:">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密码:">
<el-input v-model="form.password" type="password"></el-input>
</el-form-item>
</el-form>
<el-button type="primary" round @click="login" class="btn">登录</el-button>
</template> 首页
<template>
<h2>欢迎：{{username}}</h2>
<a @click="out">退出登录</a>
</template> 效果演示
cookie
这样，即使页面刷新，数据也不会被清除了。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]