一個自用的 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