- 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])+'" 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比较适用于存储不经常更新且不太重要的数据。