storage封装

最新推荐文章于 2023-09-09 15:17:54 发布

小郭飞侠

最新推荐文章于 2023-09-09 15:17:54 发布

阅读量370

点赞数

文章标签： javascript 前端 json

本文链接：https://blog.csdn.net/weixin_38588074/article/details/127226095

版权

storage 二次封装

基于原生的localstorage提供的api封装，这样在setitem的时候可以直接set对象，不用加引号，不同的项目之间引入了config的命名空间，易于阅读
config.js

/**
 * 环境配置封装
 */
const env = import.meta.env.MODE || 'prod';
const EnvConfig = {
    dev:{
        baseApi:'/',
        mockApi:'https://www.fastmock.site/mock/e1567130fcd6675b0a47505edfa747e0/api'
    },
    test:{
        baseApi:'//test.futurefe.com/api',
        mockApi:'https://www.fastmock.site/mock/e1567130fcd6675b0a47505edfa747e0/api'
    },
    prod:{
        baseApi:'//futurefe.com/api',
        mockApi:''
    }
}
export default{
    namespace:"manager",
    env,
    mock:true,
    ...EnvConfig[env]
}

storage.js

/**
 * storage 二次封装
 */
import config from '../config'
export default{
    setItem(key,val){
        let storage = this.getStorage()
        storage[key] = val;
        window.localStorage.setItem(config.namespace,JSON.stringify(storage))
    },
    getItem(key){
        return this.getStorage()[key]
    },
    getStorage(){
        return JSON.parse(window.localStorage.getItem(config.namespace)  || "{}")
    },
    clearItem(key){
        let storage = this.getStorage()
        delete storage[key]
        window.localStorage.setItem(config.namespace,JSON.stringify(storage))
    },
    clearAll(){
        window.localStorage.clear()
    },
}

调用