localstorage實現帶過期時間的快取功能

冬眠的山谷發表於2019-06-28
快取

 

前言

一般可以使用cookie,localstorage,sessionStorage來實現瀏覽器端的資料快取，減少對伺服器的請求。

1.cookie資料存放在本地硬碟中，只要在過期時間之前，都是有效的，即使重啟瀏覽器。但是會在每次HTTP請求中新增到請求頭中，如果資料過多，會造成效能問題。

2.sessionStorage儲存在瀏覽器記憶體中，當關閉頁面或者瀏覽器之後，資訊丟失。

3.localstorage也是儲存在本地硬碟中，除非主動清除，資訊是不會消失的。但是實際使用時我們需要對快取設定過期時間，本文便是講解如何為localstorage新增過期時間功能。

這三者僅支援同源(host+port)的資料,不同源的資料不能互相訪問到。

 

localstorage

localstorage支援以下方法

儲存資料：localStorage.setItem(key,value); 
讀取資料：localStorage.getItem(key); 
刪除單個資料：localStorage.removeItem(key); 
刪除所有資料：localStorage.clear(); 
得到某個索引的key：localStorage.key(index);

 

需要注意的是，僅支援String型別資料的讀取，如果存放的是數值型別，讀出來的是字串型別的，對於儲存物件型別的，需要在儲存之前JSON化為String型別。

對於快取，我們一般有以下方法

set(key,value,expiredTime);
get(key);
remove(key);
expired(key,expiredTime);
clear();

 

實現

設定快取

對於過期時間的實現，除了用於存放原始值的快取(key)，這裡新增了兩個快取(key+EXPIRED:TIME)和(key+EXPIRED:START:TIME)，一個用於存放過期時間，一個用於存放快取設定時的時間。

當讀取的時候比較 （過期時間+設定快取的時間）和當前的時間做對比。如果（過期時間+設定快取時的時間）大於當前的時間，則說明快取沒過期。

注意這裡使用JSON.stringify對存入的物件JSON化。讀取的時候也要轉回原始物件。

"key":{
        //輔助
        "expiredTime": "EXPIRED:TIME",
        "expiredStartTime": "EXPIRED:START:TIME",
        //全域性使用
        //使用者資訊
        "loginUserInfo": "USER:INFO",
        //搜尋欄位
        "searchString": "SEARCH:STRING",

    },
    /**
     * 設定快取
     * @param key
     * @param value
     * @param expiredTimeMS  過期時間，單位ms
     */
    "set":function (key,value,expiredTimeMS) {

        if((expiredTimeMS == 0 )  || (expiredTimeMS == null)){
            localStorage.setItem(key,value);
        }
        else {
            
            localStorage.setItem(key,JSON.stringify(value));
            localStorage.setItem(key+cache.key.expiredTime,expiredTimeMS);
            localStorage.setItem(key+cache.key.expiredStartTime,new Date().getTime());
        }


    },

 

 

讀取快取

由於讀取出來的是時間資訊是字串，需要將其轉化為數字再進行比較。

/**
     *  獲取鍵
     * @param key
     * @returns {*} key存在，返回物件；不存在，返回null
     */
    "get":function (key) {

        var expiredTimeMS = localStorage.getItem(key+cache.key.expiredTime);
        var expiredStartTime = localStorage.getItem(key+cache.key.expiredStartTime);
        var curTime = new Date().getTime();

        var sum = Number(expiredStartTime)  + Number(expiredTimeMS);

        if((sum) > curTime){
            console.log("cache-快取["+key+"]存在！");
            return  JSON.parse(localStorage.getItem(key));
        }
        else {
            console.log("cache-快取["+key+"]不存在！");
            return null;
        }



    },

 

移除快取

移除快取時需要把三個鍵同時移除。

/**
     *  移除鍵
     * @param key
     */
    "remove":function (key) {
        localStorage.removeItem(key);
        localStorage.removeItem(key+cache.key.expiredTime);
        localStorage.removeItem(key+cache.key.expiredStartTime);
    },

 

其他程式碼

/**
     * 對鍵重新更新過期時間
     * @param key
     * @param expiredTimeMS  過期時間ms
     */
    "expired":function (key,expiredTimeMS) {

        if(cache.get(key)!=null){
            localStorage.setItem(key+cache.key.expiredTime,expiredTimeMS);
        }

    },
    /**
     * 清除所有快取
     */
    "clear":function () {
        localStorage.clear();
    }

 

 

本文完整程式碼 快取

====

相關文章