数据存储工具箱—Vue项目中对Storage的封装

Vue项目中对Storage的封装，实现数据的存储、读取、删除，通过json形式操作并读写该对象。

1.Storage的封装

// Storage封装
const STORAGE_KEY = 'mall'//设置一个独一无二的key
//导出默认对象
export default{
    // 存储值
    setItem(key,value,module_name){
        if(module_name){//如果存在模块，先取出模块
            let val = this.getItem(module_name);
            val[key] = value
            this.setItem(module_name,val)//此时大对象为module_name（模块）
        }else{
            let val = this.getStorage();//val为整个大对象
            val[key] = value;
            //val是json对象 需要将其转化成字符串 ，将重新设置的大对象值赋给STORAGE_KEY
            window.sessionStorage.setItem(STORAGE_KEY,JSON.stringify(val))
        }
    },
    // 获取值,获取某一个模块下的属性（module_name:user下面的val[key]:username）
    getItem(key,module_name){
        if(module_name){//如果存在模块
            let val = this.getItem(module_name);
            if(val) return val[key];
        }
        return this.getStorage()[key];
    },
    // 获取整个数据，获取浏览器中的环境信息,信息都在mall中
    getStorage(){
        JSON.parse(window.sessionStorage.getItem(STORAGE_KEY) || '{}');
    },
    // 清空每个值
    clear(key,module_name){
        let val = this.getStorage();
        if(module_name){//有模块，干掉该模块下的属性
            if(!val[module_name])return;
            delete val[module_name][key];
        }else{//无模块，直接干掉属性
            delete val[key];
        }
        //重新将值写入
        window.sessionStorage.setItem(STORAGE_KEY,JSON.stringify(val))
    }
}

2.Storage的使用

后期补充…