Storage的封装

1.Cookie,localStorage,sessionStorage三者的区别

Cookie和storage的区别

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

localStorage,sessionStorage区别

localStorage和sessionStorage都是window对象提供的全局属性，用途都是在浏览器中存储key/value对的数据。

从使用的角度来看，两者的唯一区别在于时效性。

sessionStorage在关闭窗口或标签页之后将会删除这些数据。

而localStorage则没有这样的特性，今天、下周、明年、一百年，甚至理论上的成千上万年后都能用，除非你手动去删除。

如果你想在浏览器窗口关闭后还保留数据，请使用localStorage。

如果你是想用于临时保存同一窗口（或标签页）的数据，请使用sessionStorage。

不多说上封装代码（封装的是sessionStorage）

/**
 * Storage封装
*/
const STORAGE_KEY = 'mail';
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));
       
        }
        
    },
    //获取值
    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){
            delete val[module_name][key];
        }else{
            delete val[key];
        }
        window.sessionStorage.setItem(STORAGE_KEY,JSON.stringify(val));
    }
}