vue3 storage 二次封装

/**
 * Storage二次封装 命名空间
 */
import config from './../config'
export default { //可以用this
    getStroage() { //获取所有值并转成json
        //获取本地存储 & 装成json格式 当它是空时，给他一个对象，方便设置没有外层包裹并且直接转成字符串
        return JSON.parse(window.localStorage.getItem(config.namespace) || "{}");
    },
    setItem(key, val) { //设置一个值
        //每次从获取的都是字符串转成json格式的值，添加属性之后，设置成字符串，设置到本地存储
        let storage = this.getStroage();
        storage[key] = val;
        window.localStorage.setItem(config.namespace, JSON.stringify(storage));
    },
    getItem(key) { //获取一个值
        //获取到运行函数之后值的key
        return this.getStroage()[key]
    },
    clearItem(key) { //删除一个值
        let storage = this.getStroage()
        delete storage[key] //删除属性
        window.localStorage.setItem(config.namespace, JSON.stringify(storage));
    },
    
    clearAll() { //删除所有值
        window.localStorage.clear()
    }
}

统一管理 -> 同一事物统一管理->写项目要有这种思维

 storage -> 引用类型（数组，对象）不能识别

为什么需要命名空间？ 项目复杂，属性名相同 -> 相互覆盖 -> 获取不到值

命名空间是什么 ？一个属性名&大量键值对 （普通存储是一个属性名，对映一个键值对。）

大量键值对是怎么形成的？json格式（存储大量数据）转字符串（基本数据类型）-> 使用 JSON.parse(JSON.stringify())方法