一个自用的 Local，session，cookie 三合一封装

封装一个具备操做local，session，cookie的类（可批量操做）

首先咱们看下三个方法的基本操做

localStorage:本地储存，具备长期有效的特征，浏览器关闭也不清空数据

class Storage {
    // constructor(options) { }
    constructor() {
            console.log('constructor')
        }
        // 获取_key的数据 => { data, keyInfo }
    _getData(_key) {
            console.log('调用了get')
          let _keys = Array.isArray(_key) ? _key : [_key]
            _keys.forEach(() => {
                return JSON.parse(localStorage.getItem())
            });
        }
        //移除操做
    _remove(_key) {
            let _keys = Array.isArray(_key) ? _key : [_key]
            const _data = _keys.forEach(() => {
                localStorage.removeItem();
            });
        }
        //设置操做
     set(key, data, options = {}) {
            console.log('调用了set')
            const _key = this._getKey(key);
            const _data = JSON.stringify(data, options);
            localStorage.setItem(_key, _data);
        }
        // 是否有效期内
    _isExpired(_key) {
        const { keyInfo } = this._getData(_key);
        const { expires, timestamp } = keyInfo;
        if (!expires) {
            return true;
        }
        return (
            timestamp + expires * 24 * 3600 * 1000 - new Date().getTime() < 0
        );
    }

}
复制代码

小结：咱们先来逐一看看咱们作了什么，首先是get操做，咱们将传进的数据先判断是否为数组，不是数组就转换为数组，而后用forEach将数组的元素逐一经过localStorage.getItem()进行获取，最后再将获取到的数据经过JSON.parse()进行数据格式转换，移除操做一样判断是否为数组，而后进行逐一移除，设置操做是键值对的形式进行的,最后一个判断是否过时，用存放时间和定时时间和当前时间作比较，小于就是过时数组

Session：短时间储存，在浏览器关闭之后数据就会被删除

class Session {
    get(key) {
        let keys = Array.isArray(key) ? key : [key]
        keys.forEach((r) => {
            return JSON.parse(sessionStorage.getItem[r])
        });
    }
    set(key, value) {
            var data = {
                value: value
            }
            sessionStorage.setItem[key] = JSON.stringify(data);
        }
        // 删除
    remove(key) {
            let keys = Array.isArray(key) ? key : [key]
            keys.forEach((r) => {
                return JSON.parse(sessionStorage.removeItem[r])
            });
        }
        // 清除所有
    clear() {
        sessionStorage.clear();
    }
}
复制代码

小结：和local有殊途同归之妙浏览器

Cookie: 存储于访问者的计算机中的变量。每当同一台计算机经过浏览器请求某个页面时，就会发送这个 cookie。你能够使用 JavaScript 来建立和取回 cookie 的值

class Cookie {
    setCookie(name, value, n) {
        var oDate = new Date();
        oDate.setDate(oDate.getDate() + n);
        document.cookie = name + "=" + value + ";expires=" + oDate;
    }
    getCookie(name) {
        var str = document.cookie;
        var arr = str.split("; ");
        for (var i = 0; i < arr.length; i++) {
            //console.log(arr[i]);
            var newArr = arr[i].split("=");
            if (newArr[0] == name) {
                return newArr[1];
            }
        }
    }
    removeCookie(name) {
        this.setCookie(name, 1, -1);
    }
}
复制代码

小结：这是一个常规的cookie操做类，实际使用中得根据需求进行调整，设置是一个键值对加上时间的字符串拼接，获取时候，要去除其中的特殊符号，移除较为简单markdown

三合一

class Storage {
    // constructor(options) { }
    constructor() {
            console.log('constructor')
        }
        // 获取_key的数据 => { data, keyInfo }
    _getData(_key) {
            console.log('调用了get')
            let _keys = Array.isArray(_key) ? _key : [_key]
            _keys.forEach(() => {
                return JSON.parse(localStorage.getItem())
            });
        }
        //移除操做
    _remove(_key) {
            let _keys = Array.isArray(_key) ? _key : [_key]
            _keys.forEach(() => {
                localStorage.removeItem();
            });
        }
        //设置操做
    set(key, data, options = {}) {
            console.log('调用了set')
            const _key = this._getKey(key);
            const _data = JSON.stringify(data, options);
            localStorage.setItem(_key, _data);
        }
        // 是否有效期内
    _isExpired(_key) {
        const { keyInfo } = this._getData(_key);
        const { expires, timestamp } = keyInfo;
        if (!expires) {
            return true;
        }
        return (
            timestamp + expires * 24 * 3600 * 1000 - new Date().getTime() < 0
        );
    }

}
class Cookie {
    setCookie(name, value, n) {
        var oDate = new Date();
        oDate.setDate(oDate.getDate() + n);
        document.cookie = name + "=" + value + ";expires=" + oDate;
    }
    getCookie(name) {
        var str = document.cookie;
        var arr = str.split("; ");
        for (var i = 0; i < arr.length; i++) {
            //console.log(arr[i]);
            var newArr = arr[i].split("=");
            if (newArr[0] == name) {
                return newArr[1];
            }
        }
    }
    removeCookie(name) {
        this.setCookie(name, 1, -1);
    }
}
class Session {
    get(key) {
        let keys = Array.isArray(key) ? key : [key]
        keys.forEach((r) => {
            return JSON.parse(sessionStorage[r])
        });
    }
    set(key, value) {
            var data = {
                value: value
            }
            sessionStorage[key] = JSON.stringify(data);
        }
        // 删除
    remove(key) {
            let keys = Array.isArray(key) ? key : [key]
            keys.forEach((r) => {
                return JSON.parse(sessionStorage.removeItem[r])
            });
        }
        // 清除所有
    clear() {
        sessionStorage.clear();
    }
}
export { Storage, Cookie, Session };
复制代码

小结，这里把他们放进一个文件中，而后把他们类名暴露出去，咱们再看看如何使用cookie

  const local = new _Storage()
  local.set("name", { name: "SuperIron" }, { expires: 1 });
  const Info = local.get('name')
复制代码

首先咱们先将类实例化，而后按照预留的插槽传参session