可以在utils文件夹中新建一个Storage.js文件
//存值
export const setStorage = (key, value) => {
localStorage.setItem(key, value)
}
//取值
export const getStorage = (key) => {
return localStorage.getItem(key)
}
//清除
export const removeStorage = (key) => {
localStorage.removeItem(key)
}
//全部清除
export const clearStorage = () => {
localStorage.clear()
}
我们在使用的时候就可以,按需导入,使用
//按需引入
import { setStorage } from '@/utils/Storage.js'
//使用的时候,直接调用方法
//参数1是存在缓存中的key(自己定)
//参数2是缓存的value(必须是字符串 或 数字类型)
setStorage('token',res.data.token)
封装的话,是有利于后期维护的,如果要缓存到本地的页面数据在多个组件中,每个组件中,我们都直接写localStorage.setItem(key,value) ,如果后面需求要把localStorage改成sessionStorage,我们就需要一个一个页面去找,找完再修改,不如直接封装好,以后要更改,我们可以直接改!
//存值
export const setStorage = (key, value) => {
sessionStorage.setItem(key, value)
}
//取值
export const getStorage = (key) => {
return sessionStorage.getItem(key)
}
//清除
export const removeStorage = (key) => {
sessionStorage.removeItem(key)
}
//全部清除
export const clearStorage = () => {
sessionStorage.clear()
}