基于localStorage开发的前端缓存jquery插件，jquery.cache.js

什么是localStorage？

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同

localStorage的优势

1、localStorage拓展了cookie的4K限制

2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的

localStorage的局限

1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性

2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换

3、localStorage在浏览器的隐私模式下面是不可读取的

4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

5、localStorage不能被爬虫抓取到

localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空

jquery.cache.js 主要代码如下：

/* 
     * @discription 用于前端页面缓存JSON格式的数据
     * @author huangshipiao      
     * @created 2017年6月22日 下午6:26:59     
 */
(function(window, undefined){
	var config={
		expire : 10,  //缓存数据默认十分钟失效
		debug  : false
	}
	
	
	function setCache(key,obj){
		   var data = JSON.stringify(obj);
		   var time = new Date().getTime();
		   var jsonData={"data":obj,"cacheTime":time};
		   if(config.debug){
				console.log("设置缓存数据："+data);
			}
		   return localStorage.setItem(key, JSON.stringify(jsonData));
		}
		
		function getCache(key){
			if(!key){
				if(config.debug){
					console.log("key为空，key=【"+key+"】");
				}
				return "";
			}
			var jsonData=JSON.parse(localStorage.getItem(key));
			if(!jsonData){
				if(config.debug){
					console.log("【"+key+"】缓存的数据不存在");
				}
				return "";
			}
			var nowDate=new Date().getTime();
			var cacheTime=new Date(jsonData.cacheTime).getTime();
			if(apartMinutes(cacheTime,nowDate)>config.expire){
				if(config.debug){
					console.log("超过"+config.expire+"分钟 ,【"+key+"】缓存失效!");
				}
				return "";
			}
			if(config.debug){
				console.log("【"+key+"】获取到的缓存数据："+jsonData.data);
			}
			return jsonData.data;
		}
		
		
		function apartMinutes(date1,date2){
			var date3=date2 - date1;  
		    var minutes=Math.floor(date3/(60*1000));
		    if(config.debug){
				console.log("数据已缓存时间："+minutes+"分钟");
			}
		    return minutes;
		}
		
		var cache =  {
			getCache: getCache,
			setCache: setCache,
			configCache: function(obj) {
				$.extend(config, obj);
			}
		};
		
		window.jQuery && ($.extend(window.jQuery, cache));
						
})(window);

功能介绍:

主要用于前端页面数据缓存，提高页面的响应能力,快速获取常用数据；

可以将要缓存的数据转换为json字符串存储：

缓存设置的有效时间默认为十分钟，可以通过配置进行修改缓存时间；

也可以通过配置是否输出日志。

使用方法：

1.设置缓存

   假设要缓存的数据为一个数组对象： 

var datas=[{"id":"1","name":"andy"},{"id":"2","name":"lili"},{"id":"1","name":"lucy"}];

   则可以设置    

$.setCache("users",datas);

2.获取数据     

var datas=$.getCache("users");

      $.each(datas, function (index, data) {
          var id=data.id;
          var name = data.name;

          console.log(index+":id="+id+",name="+name);

      });

3，配置缓存时间和日志输出    

$.configCache({"expire": 20,"debug  : true});

操作结果如下：