基于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});

操作结果如下：