【金秋打卡】第16天 本地缓存
2022/11/9 4:24:10
本文主要是介绍【金秋打卡】第16天 本地缓存,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
课程名称:基于Vue3最新标准,实现后台前端综合解
课程章节: 第一章
课程讲师:Sunday
课程内容:
在项目开发过程中 我们获取到token后 会把token 进行缓存 而缓存的方式有两种
本地缓存:LocalStorage
全局状态管理: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() }) ... }) } }}
这篇关于【金秋打卡】第16天 本地缓存的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-23JAVA语音识别项目入门教程
- 2024-11-23Java云原生学习:从入门到实践
- 2024-11-22Java创业学习:初学者的全面指南
- 2024-11-22JAVA创业学习:零基础入门到实战应用教程
- 2024-11-22Java创业学习:从零开始的Java编程入门教程
- 2024-11-22Java对接阿里云智能语音服务学习教程
- 2024-11-22JAVA对接阿里云智能语音服务学习教程
- 2024-11-22Java对接阿里云智能语音服务学习教程
- 2024-11-22Java副业学习:零基础入门到实战项目
- 2024-11-22Java副业学习:零基础入门指南