採用localStorage做定時緩存

背景

頁面採用ajax獲取數據時，每訪問一次就會發送一次請求向服務端獲取數據，可是呢。 有些數據更新的又不頻繁，所以我就想著使用localStorage進行本地存儲，然後在固定間隔時在去更新數據。(下載地址：https://gitee.com/whnba/data_storage)

結構設計

expires：用於保存數據到期時間

data:用於保存數據

{
    expires: "到期時間"
    data:"數據"     
}

設置緩存數據

採用JSON把數據結構進行序列化保存,如果數據滿了就全部清空吧。不然怎麼辦

    static set(key, value, expires = 3600) {
        const date = new Date();
        try {
            localStorage.setItem(key, JSON.stringify({
                expires: date.valueOf() + expires * 1000,
                data: value
            }));
        } catch (e) {
            if (e.name === 'QuotaExceededError') {
                console.log("數據已滿，自動清空");
                Cache.clear();
                Cache.set(key, value, expires);
            }
        }
    }

獲取緩存數據

先判斷數據是否到期，如果沒有到期就返回數據，反之刪除。

    static get(key) {
        const result = JSON.parse(localStorage.getItem(key));
        const date = new Date();
        if (result && result.expires > date) {
            return result.data;
        } else {
            Cache.remove(key);
            return null;
        }
    }

完整代碼

/**
 * 數據緩存
 */
class Cache {

    /**
     * 獲取緩存
     * @param key
     * @return {any}
     */
    static get(key) {
        const result = JSON.parse(localStorage.getItem(key));
        const date = new Date();
        if (result && result.expires > date) {
            return result.data;
        } else {
            Cache.remove(key);
            return null;
        }
    }

    /**
     * 設置緩存
     * @param {String} key 鍵名
     * @param {any} value 緩存數據
     * @param {Number} expires 過期時間 單位 s
     */
    static set(key, value, expires = 3600) {
        const date = new Date();
        try {
            localStorage.setItem(key, JSON.stringify({
                expires: date.valueOf() + expires * 1000,
                data: value
            }));
        } catch (e) {
            if (e.name === 'QuotaExceededError') {
                console.log("數據已滿，自動清空");
                Cache.clear();
                Cache.set(key, value, expires);
            }
        }
    }

    /**
     * 刪除鍵
     * @param key
     */
    static remove(key) {
        localStorage.removeItem(key);
    }

    /**
     * 清空
     */
    static clear() {
        localStorage.clear();
    }
}

export default Cache;