Cookie、localStorage、sessionStorage三者区别

Cookie、localStorage、sessionStorage三者区别

三者区别

1、存储大小：Cookie 4K、Storage 5M
2、有效期：Cookie拥有有效期，Storage永久存储
(localStorage是永久存储，sessionStorage是会话关闭自动消失)
4、存储位置：Cookie会发送到服务器端，存储在内存中，Storage只存储在浏览器中(sessionStorage是存储到内存里的)
5、路径：Cookie有路径限制，Storage只存储在域名下
6、API：Cookie没有特定的API，Storage有对应的API

• 注：什么是API？
• API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。——百度百科

为什么要封装Storage，本身不是已经有API？

• Storage本身有API，但是只是简单的key/value形式

• Storage只存储字符串，需要人工转换成json对象

• Storage只能一次性清空，不能单个清空

    /**
     * Storage封装
     */
    const STORAGE_KEY = 'mall';
    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){
                delete val[module_name][key];
            }else{
                delete val[key];
            }
            this.setItem(val);
        }
    }