vue 3.0之localStorage的二次封装

vue 3.0之localStorage的二次封装

config / index.js

// 环境配置 
// 引入的时候 import config from "XXX/config";
const env = import.meta.env.MODE || 'prod';
const envConfig = {
    dev: {
        baseApi: '/',
        mockApi: "https://www.fastmock.site/mock/e8101888e63cef7d588d7db9fbd2ad51/v_api"
    },
    test: {
        baseApi: '/',
        mockApi: "https://www.fastmock.site/mock/e8101888e63cef7d588d7db9fbd2ad51/v_api"
    },
    prod: {
        baseApi: '/',
        mockApi: ""
    }
}
export default {
    namespace: "maneger", // 命名空间 用于归类loaclStorage等本地缓存
    env, // 环境变量 开发环境
    mock: true, // 是否使用mock数据
    ...envConfig[env], // 请求的基础路径 
}

utils / storage.js

// storage的二次封装
// eg ： namespace: "maneger",
import config from "../config"
/**
 * 使用方式
 * * * main.js挂载全局
 *  import storage from './utils/storage';
    const app = createApp(App);
    app.config.globalProperties.$storage = storage;
 * * * vue3.0 全局使用 vue实例上的数据
 *  import { defineComponent, reactive, getCurrentInstance } from "vue";
 *  let { appContext } = getCurrentInstance();
    appContext.config.globalProperties.$storage.setItem("username","aaa");
    appContext.config.globalProperties.$storage.setItem("age",20);
    appContext.config.globalProperties.$storage.clearItem("age");
    appContext.config.globalProperties.$storage.clearAll();
 */
export default {
    getStorage () { // 先获取该项目的 命名存储空间 下的storage数据 maneger
        return JSON.parse(window.localStorage.getItem(config.namespace) || "{}");
    },
    setItem (key, val) {
        let storage = this.getStorage()
        // console.log("setItem", storage);
        storage[key] = val; // 为当前对象添加 需要存储的值
        window.localStorage.setItem(config.namespace, JSON.stringify(storage)) // 保存到本地
    },
    getItem (key) {
        return this.getStorage()[key]
    },
    // 清空 当前的项目下命名存储的空间 该key项的 Storage 数据
    clearItem (key) {
        let storage = this.getStorage()
        delete storage[key]
        window.localStorage.setItem(config.namespace, JSON.stringify(storage)) // 保存到本地
    },
    // 清空所有的 当前的项目下命名存储的空间 Storage 数据
    clearAll () {
        window.localStorage.clear();
    }
}