最近在工作中遇到了这样一个情景。有些数据是从后台读取的,但是我暂时不需要展示在页面上,那怎么办呀?——缓存呀。今天我就来分享一下我所了解的Jquery缓存数据的方法。
首先分享1篇博文——《读jQuery之六(缓存数据)》,还有2个文档:Jquery中的.data()方法,以及jQuery.data()方法。通过这些资料,你应该就会对缓存数据有了一定的了解。具体的介绍文档里已经说的很清楚了,我要分享的是自己写的一些js方法。
在JAVA开发中,我们需要缓存数据,一般都选择放在了Map中。就算是放在各种缓存框架,也基本上都是以Key/Value的方式存放起来的。既然现在要在页面上缓存数据,那么我们就模仿Map来实现缓存数据的功能吧。
jQuery.data()是一个底层的方法,所以我们尽量使用.data()的方法来完成这个功能。方法说明如下:
根据说明,进行存储数据。由于是做缓存的,属于页面全局所有的。所以元素就选择body。具体代码如下:
var map = { /** * 缓存数据 * 如果当前key已缓存了值,则抛出existed异常 */ put : function(key,value,override) { if(!this.get(key)) { var arr = new Array(); arr.push(value); $("body").data(key, arr); }else if(override){//覆盖 this.update(key, value); }else{ throw new Error(key + " existed"); } }, /** * 更新缓存数据 */ update:function(key,value,idx,name){ if(!this.get(key)) { throw new Error(key + " is non-existed"); }else{ var arr = this.get(key); if(idx || idx>=0){ if(arr[idx] instanceof Array){//数组的话 this.remove(key); this.put(key,value,true); }else if(arr[idx] instanceof Object){ if(typeof(value)=='number'){ eval("arr["+idx+"]."+name+"="+value); }else{ eval("arr["+idx+"]."+name+"='"+value+"'"); } } }else{ this.remove(key); this.put(key,value,true); } } }, /** * 在同一个key中追加数据 */ append:function(key, value) { if(!this.get(key)) { var arr = new Array(); arr.push(value); $("body").data(key, arr); }else{//覆盖 var arr = this.get(key); arr.push(value); $("body").data(key, arr); } }, /** * 移除缓存 * 如果当前key已缓存了值,则抛出non-existed异常 */ remove:function(key){ if(this.get(key)) { $("body").removeData(key); }else{ throw new Error(key + " is non-existed"); } }, /** * 移除所有缓存数据 */ removeAll:function(){ $("body").removeData(); }, /** * 获取缓存数据 */ get:function(key) { return ($("body").data(key) ? $("body").data(key) : undefined); }, /** * 获取缓存数据数组,结果为数组类型 */ getArray:function(key){ return $("body").data(key); }, /** * 获取所有缓存数据,结果为对象类型 */ getObject:function(){ return $("body").data(); } }
<body> <textarea id="scripts" row="3" style="width:800px;height:540px"> map.removeAll();//移除所有的缓存数据 map.put("user","zhangsan");//添加缓存 $("#result").text("姓名:" + map.get("user")); $("#wait").text(" [1秒后会更新该值]"); setTimeout(function (){ $("#wait").text(""); $("#result").text(""); var user = {name:'lisi'}; map.update("user",user);//更新缓存 $("#result").text("姓名:"+map.get("user")[0].name); $("#wait").text(" [1秒后会更新该值]"); setTimeout(function(){ $("#wait").text(""); $("#result").text(""); map.update("user",22,"age",0);//更新缓存 map.update("user","xx市xx街xx号","addr",0);//更新缓存 var user = map.get("user")[0]; $("#result").text("姓名:"+user.name+' 年方:'+user.age+" 家住:"+user.addr); $("#wait").text(" [1秒后会更新该值]"); },1000); setTimeout(function(){ $("#wait").text(""); $("#result").text(""); var user2 = {name:'zhangsan'}; map.append("user",user2);//追加缓存 $("#result").text("姓名1:"+map.get("user")[0].name+' ,姓名2:'+map.get("user")[1].name); $("input").show(); },2000); },1000); </textarea><br/><br/> 执行结果:<span id="result" style="color:#ff0000"></span><span id="wait"></span><br/> ---------------------------------------------------<br/> 预计结果:<br/> 姓名:zhangsan<br/> 姓名:lisi<br/> 姓名:lisi 年方:22 家住:xx市xx街xx号<br/> 姓名1:lisi ,姓名2:zhangsan <br/><br/><input type="button" onclick="eval($('#scripts').val());" value="运行测试"> <input type="button" style="display:none;" onclick="alert(map.get('user')[0].name)" value="获取第一个缓存的name值"> <input type="button" style="display:none;" onclick="alert(map.getArray('user').length)" value="获取缓存的数量"> <input type="button" style="display:none;" onclick="alert(JSON.stringify(map.get('user')[0]))" value="获取第一个用户的详细信息"> </body>
点击这个可以在线查看运行结果。