localstorage實現帶過時時間的緩存功能

 

前言

通常可使用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(); }

 

 

本文完整代碼 緩存

====