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


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yqwang_cn

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值