ToB企服应用市场:ToB评测及商务社交产业平台

标题: 通过cookie和localstorage实现数据持久化 [打印本页]
作者: 铁佛    时间: 2022-6-26 03:31
标题: 通过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

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

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



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4