【金秋打卡】第16天 本地缓存

课程名称：基于Vue3最新标准，实现后台前端综合解

课程章节： 第一章

课程讲师：Sunday

课程内容:

    

    在项目开发过程中 我们获取到token后 会把token 进行缓存 而缓存的方式有两种

1.  本地缓存：LocalStorage

2.  全局状态管理：Vuex

保存在 LocalStorage 是为了方便实现 自动登录功能

保存在 vuex 中是为了后面在其他位置进行使用

那么下面我们就分别来实现对应的缓存方案：

新建 storage.js 文件 封装

/**
 * 存储数据
 */
 export const setItem = (key, value) => {
  // 将数组、对象类型的数据转化为 JSON 字符串进行存储
  if (typeof value === 'object') {
    value = JSON.stringify(value)
  }
  window.localStorage.setItem(key, value)}
 /**
 * 获取数据
 */
 export const getItem = key => {
  const data = window.localStorage.getItem(key)
  try {
    return JSON.parse(data)
  } catch (err) {
    return data  
  }
}
/**
 * 删除数据
 */
 export const removeItem = key => {
  window.localStorage.removeItem(key)
 }
 /**
 * 删除所有数据
 */
 export const removeAllItem = key => {
  window.localStorage.clear()
  }

在 vuex 的 user 模块下，处理 token 的保存

import { login } from '@/api/sys'import md5 from 'md5'
import { setItem, getItem } from '@/utils/storage'
import { TOKEN } from '@/constant'
export default {
  namespaced: true,
  state: () => ({
    token: getItem(TOKEN) || ''
  }),
  mutations: {
    setToken(state, token) {
      state.token = token
      setItem(TOKEN, token)
    }
  },
  actions: {
    login(context, userInfo) {
      ...
          .then(data => {
            this.commit('user/setToken', data.data.data.token)
            resolve()
          })
          ...
      })
    }
  }}