本地缓存 封装

可以在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()
  }