项目中封装Storage

1. cookie，localstorage，sessionstorage三者区别：

• 存储大小：Cookie 4K Storage 5M
• 有效期：Cookie拥有有效期，localstorage永久存储，sessionstorage储存在内存中，随浏览器关闭而消失
• Cookie会发送到服务器端，存储在内存中（为什么浏览器和服务端会认识你呢？张三登录获取张三自己的用户信息，为什么能把张三的用户信息返回给张三呢，因为我们前端把cookie发送给服务器端，告诉他们我是张三）
• sessionstorage只会存储在内存中，localstorage只存储在浏览器中。 路径：Cookie有路径限制，Storage只存储在域名下 API：Cookie没有特定的API，Storage有对应的API（getItem()等）

2. 为什么要封装Storage ？

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

综上 ，我们可以封装storage方便统一管理

在浏览器中手动添加一条storage方便调试，设置“mall”为 整个项目的storage的集合名 ， “user”为某一模块名称module_name ，“address”为 key ，“北京市”为value ， 写成json格式 。 如果需要另外一个模块 ， 就存储在user的同级 。 这样 ，项目的所有的storage的管理在mall中 ， 不至于显得很混乱

封装还有一些不足 ：

1. 此项目只用的上sessionStorage ，所以封装的sessionStorage
2. 没有封装新添加另一个module_name的函数 ， 故事先手动添加一条方便调试

封装代码如下 ：

    const STORAGE_KEY = 'mall';
    
    // 获取全部storage
    getStorage() {
        return JSON.parse(window.sessionStorage.getItem(STORAGE_KEY) || '{}');
        // 利用 window.sessionstorage自带的api获取，
        // 我们需要再JSON.parse转换成json格式，方便以后封装和使用
    },
	
    
    // 取某一条storage
    // module_name指user那一级别，如果没有module_name，则在user同级查询数据
    getItem(key, module_name) {
        if (module_name) {
            let val = this.getItem(module_name);
            if (val)
                return val[key];
        } else {
            let val = this.getStorage();
            return val[key];
        }
    },


  // 存储storage
      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));
            //每次插入数据之后，都要更新一次数据
            //由于setItem的参数必须是字符串的格式，我们要进行转换
        }
    },

  // 删除某一条
      clear(key, module_name) {
        let val = this.getStorage();
        if (module_name) {
            if (!val[module_name][key]) return;
            delete val[module_name][key];
        } else {
            delete val[key];
        }
        window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val));
        //每次删除数据后，都要重新刷新数据
        //由于setItem的参数必须是字符串的格式，我们要进行转换
    }

3. 最后按需导入使用

import storage from "@/storage/index"

// storage.getStorage() 等