通过cookie和localstorage实现数据持久化

最近在写vue项目的时候，把登录的用户信息放在Vuex（store）中，但只要页面一刷新，登录时存入Vuex（store）的数据就被清除了，为解决这一问题，我决定将用户登录信息存入cookie中。
   注意：cookie只能存储非常小的数据，大量的数据可存储于localstorage中
  安装插件

使用cookie前，需要安装相应的插件，localstorage无需安装插件

1. npm install js-cookie --save

复制代码

封装方法

新建/src/utils/cookie.js (文件夹和文件名可根据自己的习惯命名)

1. import cookie from 'js-cookie'    //导入插件
3. export function getCookie(key) {   //获取，key为要获取的cookie
4.   return cookie.get(key)
5. }
7. export function setCookie(key, data) {   //设置，key为要设置的cookie名，data为对应的值
8.   return cookie.set(key, data)
9. }
11. export function removeCookie(key) {     //删除，key为要删除的cookie
12.   return cookie.remove(key)
13. }

复制代码

新建/src/utils/storage.js

1. export function getStorage(key) {
2.   return JSON.parse(localStorage.getItem(key))   //JSON.parse()用于解析Json字符串
3. }
5. export function setStorage(key, data) {
6.   localStorage.setItem(key, JSON.stringify(data))   //JSON.stringif()用于将JS对象转换为JSON字符串
7. }
9. export function removeStorage(key) {
10.   localStorage.removeItem(key)
11. }

复制代码

实战

此实战案例是在vue+mysql实现登录案例的基础上构建的，有需要请自行移步
Vuex（store）

1. import Vue from 'vue'
2. import Vuex from 'vuex'
3. import { getCookie, removeCookie, setCookie } from '../utils/cookie'   //导入对应方法
4. import { getStorage, removeStorage, setStorage } from '../utils/storage'
6. Vue.use(Vuex)
8. export default new Vuex.Store({
9.   state: {
10.     username: getCookie('username'),
11.     info: getStorage('info')
12.   },
13.   mutations: {
14.     setCookie(cookie) {
15.       setCookie(cookie.key, cookie.data)
16.     },
17.     removeCookie(key) {
18.       removeCookie(key)
19.     },
20.     setStorage(storage) {
21.       setStorage(storage.key, storage.data)
22.     },
23.     removeStorage(key) {
24.       removeStorage(key)
25.     }
26.   }
27. })

复制代码

  对于Vuex（store）方法定义、方法调用、参数传递等知识不了解的，可参考这里，或自行去找文章或视频学习，这里不做赘述，直接使用了
  登陆页面

输入用户名和密码，登陆成功时，将用户名存入cookie

1. <template>
2.   
3.    
4.         <h2>登录页面</h2>
5.         <el-form ref="form" :model="form" label-width="20%">
6.         <el-form-item label="用户名:">
7.             <el-input v-model="form.username"></el-input>
8.         </el-form-item>
9.         <el-form-item label="密  码:">
10.             <el-input v-model="form.password" type="password"></el-input>
11.         </el-form-item>
12.         </el-form>
13.         <el-button type="primary" round @click="login" class="btn">登录</el-button>
14.    
15.   
16. </template>

复制代码

首页

1. <template>
2.   
3.           <h2>欢迎：{{username}}</h2>
4.     <a @click="out">退出登录</a>
5.   
6. </template>

复制代码

效果演示


  cookie

这样，即使页面刷新，数据也不会被清除了。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！