HTML5本地存儲-localStorage如何實作定時存儲

HTML5 提供了兩種在用戶端存儲資料的新方法：

• localStorage - 沒有時間限制的資料存儲
• sessionStorage - 針對一個 session 的資料存儲

然而，今天我要說的是“localStorage如何實作定時存儲”，正常情況下，localStorage存入key-value後，可以永久使用（前提：不清理cookie操作）. 但是，項目中，我們或許需要實作1.需要在間隔某段時間後，重新整理所存的值;2.存儲一段時間，而非永久；

解決思路，由于 localStorage 方法存儲的資料沒有時間限制。第二天、第二周或下一年之後，資料依然可用。是以我們需要在存取方面重新處理，先上代碼：

//定時 緩存
var MyLocalStorage ={		
		Cache : {			
			/**
			 * 總容量5M
			 * 存入緩存，支援字元串類型、json對象的存儲
			 * 頁面關閉後依然有效 ie7+都有效
			 * @param key 緩存key
			 * @param stringVal
			 * @time 數字 緩存有效時間（秒） 預設60s 
			 * 注：localStorage 方法存儲的資料沒有時間限制。第二天、第二周或下一年之後，資料依然可用。不能控制緩存時間，故此擴充
			 * */
			put : function(key,stringVal,time){
				try{
					if(!localStorage){return false;}
					if(!time || isNaN(time)){time=60;}
					var cacheExpireDate = (new Date()-1)+time*1000;
					var cacheVal = {val:stringVal,exp:cacheExpireDate};
					localStorage.setItem(key,JSON.stringify(cacheVal));//存入緩存值
					//console.log(key+":存入緩存，"+new Date(cacheExpireDate)+"到期");
				}catch(e){}	
			},
			/**擷取緩存*/
			get : function (key){
				try{
					if(!localStorage){return false;}
					var cacheVal = localStorage.getItem(key);
					var result = JSON.parse(cacheVal);
					var now = new Date()-1;
					if(!result){return null;}//緩存不存在
					if(now>result.exp){//緩存過期
						this.remove(key);					
						return "";
					}
					//console.log("get cache:"+key);
					return result.val;
				}catch(e){
					this.remove(key);
					return null;
				}
			},/**移除緩存，一般情況不手動調用，緩存過期自動調用*/
			remove : function(key){
				if(!localStorage){return false;}
				localStorage.removeItem(key);
			},/**清空所有緩存*/
			clear : function(){
				if(!localStorage){return false;}
				localStorage.clear();
			}
		}//end Cache
}
//調用方法1.存入使用者資訊1天,并取出
var user = {name:'demo1',nickName:'測試賬号'}
MyLocalStorage.Cache.put("cookieKey",user,1*24*60*60);//存儲一天
MyLocalStorage.Cache.get("cookieKey");//得到的是Object {name: "demo1", nickName: "測試賬号"}，如果過期，此處取到的是空字元串
//調用方法2.存入字元串1分鐘
var str = "xxx存入localStorage";
MyLocalStorage.Cache.put("cookieKey",str,60);//存儲一天
//其他移除、清空等操作，在此我便無需寫了，相信各位一看便知。
           

那如何實作資料過期則查詢背景的資料，資料未過期，就使用存儲的資料呢？ ajax請求資料為例：

function getHotList(){
	//本地無資料或資料過期，則通過請求查詢資料庫，同時将查詢得到的結果，存入本地，下次重新整理頁面，無需請求資料庫，直接使用本地資料，提升效率
	var cacheKey = "CACHE-HotWords";
	$(".search-hot-words").html("");
	if($(".search-hot-words").length==0){return false;}
	try{
		var cache = MyLocalStorage.Cache.get(cacheKey);
		if(cache){
			$(".search-hot-words").html(cache);
			return false;
		}
	}catch(e){}

	$.post(basePath+"hotwords/list",{limit:7,t:new Date()-1},function(result){
		try{
			result = JSON.parse(result);
			if(result.status!=1){return false;}
			if(result.data.length>0){/*no data hide*/
				var hotTags = "";
				for(var i = 0,max = result.data.length ; i < max; i++){
					hotTags += '<a href="q?entityType=0&k='+encodeURI(result.data[i][0])+'" target="_blank" rel="external nofollow"  title="'+result.data[i][0]+'" target="_blank">'+result.data[i][0]+'</a>';
				}
				$(".search-hot-words").html(hotTags);
				MyLocalStorage.Cache.put(cacheKey,hotTags,24*60*60);//24小時 此處存入的直接是html代碼片段，（可以直接存入背景傳回的json）因人而異
			}
		}catch(e){}
	});
}
           

最後提醒各位， 1.使用此方式存儲(包括localStorage,sessionStoraage)，需注意使用者隐私：重要機密資訊就不要使用localStorage了，慎重使用，畢竟用戶端都可以讀取值。

2.localStorage比較适用于存儲不經常更新且不太重要的資料。