前言
創(chuàng)新互聯(lián)服務項目包括紅河網(wǎng)站建設、紅河網(wǎng)站制作、紅河網(wǎng)頁制作以及紅河網(wǎng)絡營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術優(yōu)勢、行業(yè)經驗、深度合作伙伴關系等，向廣大中小型企業(yè)、政府機構等提供互聯(lián)網(wǎng)行業(yè)的解決方案，紅河網(wǎng)站推廣取得了明顯的社會效益與經濟效益。目前，我們服務的客戶以成都為中心已經輻射到紅河省份的部分城市，未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任！
一般可以使用cookie,localstorage,sessionStorage來實現(xiàn)瀏覽器端的數(shù)據(jù)緩存，減少對服務器的請求。
1.cookie數(shù)據(jù)存放在本地硬盤中，只要在過期時間之前，都是有效的，即使重啟瀏覽器。但是會在每次HTTP請求中添加到請求頭中，如果數(shù)據(jù)過多，會造成性能問題。
2.sessionStorage保存在瀏覽器內存中，當關閉頁面或者瀏覽器之后，信息丟失。
3.localstorage也是保存在本地硬盤中，除非主動清除，信息是不會消失的。但是實際使用時我們需要對緩存設置過期時間，本文便是講解如何為localstorage添加過期時間功能。
這三者僅支持同源(host+port)的數(shù)據(jù),不同源的數(shù)據(jù)不能互相訪問到。
localstorage
localstorage支持以下方法
需要注意的是，僅支持String類型數(shù)據(jù)的讀取，如果存放的是數(shù)值類型，讀出來的是字符串類型的，對于存儲對象類型的，需要在保存之前JSON化為String類型。
對于緩存，我們一般有以下方法
set(key,value,expiredTime); get(key); remove(key); expired(key,expiredTime); clear();
實現(xiàn)
設置緩存
對于過期時間的實現(xiàn)，除了用于存放原始值的緩存(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());
}
},讀取緩存
由于讀取出來的是時間信息是字符串，需要將其轉化為數(shù)字再進行比較。
/**
* 獲取鍵
* @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實現(xiàn)帶過期時間的緩存功能，希望對大家有所幫助如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
