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

來源：懂視網責編：小采時間：2020-11-27 21:54:12

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

localstorage實現帶過期時間的緩存功能:前言一般可以使用cookie,localstorage,sessionStorage來實現瀏覽器端的數據緩存，減少對服務器的請求。 1.cookie數據存放在本地硬盤中，只要在過期時間之前，都是有效的，即使重啟瀏覽器。但是會在每次HTTP請求中添加到請求頭中，如果數據過多，會造成性能問

推薦度：

點擊下載本文 文檔為doc格式

導讀localstorage實現帶過期時間的緩存功能:前言一般可以使用cookie,localstorage,sessionStorage來實現瀏覽器端的數據緩存，減少對服務器的請求。 1.cookie數據存放在本地硬盤中，只要在過期時間之前，都是有效的，即使重啟瀏覽器。但是會在每次HTTP請求中添加到請求頭中，如果數據過多，會造成性能問

前言

一般可以使用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();
 }

總結

以上所述是小編給大家介紹的localstorage實現帶過期時間的緩存功能，希望對大家有所幫助如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

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

推薦度：

點擊下載本文 文檔為doc格式

標簽：緩存過期時間 localstorage

熱門焦點

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

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

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

最新推薦

猜你喜歡

熱門推薦