Storage封装

cookie 、localstorage 、sessionstorage的区别：

三者区别

-存储大小：Cookie 4K，Storage 5M
-有效期：Cookie 拥有有效期，Storage永久存储
-Cookie会发送到服务器端，存储在内存中，Storage只存储在浏览器端
-路径：Cookie有路径限制，Storage只存储在域名下
-API：Cookie没有特定的API，Storage 有对应的API

为什么要封装Storage?

-Storage本身有API，但只是简单的key/value形式
-Storage只存储字符串，需要人工转换成json对象
-Storage只能一次性清空，不能单个清空

/**
 * storage封装
 */
const STORAGE_KEY = "mimall";
export default {
    // 存储值
    setItem(key, value, module_name) {
        if (module_name) {
            let val = this.getItem(module_name);
            val[key] = value;
            this.setItem(module_name, val);
        } else {
            let val = this.getStorage();
            val[key] = value;
            window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val));
        }
    },
    // 获取值
    // 获取某一模块下面的属性user下面的userName
    getItem(key, module_name) {
        if (module_name) {
            let val = this.getItem(module_name);
            if (val) return val[key];
        }
        return this.getStorage()[key];
    },
    //  获取浏览器中的缓存信息
    getStorage() {
        return 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));
    }

}

在App.vue中调用

<script>
import storage from './storage';
export default {
    name: 'App',
    components: {},
    mounted() {
         storage.setItem('a',1);
        // 覆盖原有的user模块
         storage.setItem('user',{a:1});
        // 向原有的user追加 adb:{a:1}
        storage.setItem('abc',{a:1},'user');
        // 清除
        storage.clear('a');
        // 清除user模块下面的 abc
        storage.clear('abc','user');
    },
};
</script>