vue-05 sessionStorage封装

目录

1.Cookie、localStorage、sessionStorage

1.1三者区别

1.2为什么要封装Storage

2.封装

2.1sessionStorage

2.1.1封装成下面形式

2.1.2代码

 

---

1.Cookie、localStorage、sessionStorage

1.1三者区别

存储大小： Cookie4k、localStorage5M、sessionStorage据说大小限制为2M左右

有效期：Cookie拥有有效期、localStroage永久存储，sessionStorage会话技术浏览器关闭就没了

存储位置：Cookie会发送到服务器存到内存，Stroage存储到浏览器端，sessionStorage 存到内存

路径：cookie有路径限制、storage存到域名下

API：cookieapi模糊，storage有对应的api

1.2为什么要封装Storage

storage本身有api，但只是简单形式的key/vaue形式

storage只存储字符串，需要手工转成json对象

storage只能一次性清空，不能单个清空

2.封装

2.1sessionStorage

2.1.1封装成下面形式

{"user":{"userName":"bushuangli","age":18}}

2.1.2代码

/**
 * storage 封装 全局数据key
 * @type {string}
 */
const STORAGE_KEY= "mail";
export default {
    /**
     * 存值
     * @param key 存储的对象名
     * @param value 值
     * @param module_name 如果传这个值就是存到那个模块
     */
    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));
        }
    },
    /**
     * 获取某个模块下面的属性
     * @param key 只传key就是取mail下的对象
     * @param module_name 传moduleName
     * @returns {*}
     */
    getItem(key,module_name){
        if (module_name){
            let val = this.getItem(module_name);
            if(val) return val[key];
        }
        return this.getStorage()[key];
    },
    /**
     * 获取所有值
     * @returns {any}
     */
    getStorage() {
        return JSON.parse(window.sessionStorage.getItem(STORAGE_KEY) || '{}');
    },
    /**
     * 删除模块的key，删除的模块
     * @param key
     * @param module_name
     */
    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));
    }
}