• 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 += ''+result.data[i][0]+'';				}				$(".search-hot-words").html(hotTags);				MyLocalStorage.Cache.put(cacheKey,hotTags,24*60*60);//24小时 此处存入的直接是html代码片段，（可以直接存入后台返回的json）因人而异			}		}catch(e){}	});}

最后提醒各位，

1.使用此方式存储(包括localStorage,sessionStoraage)，需注意用户隐私：重要机密信息就不要使用localStorage了，慎重使用，毕竟客户端都可以读取值。

2.localStorage比较适用于存储不经常更新且不太重要的数据。