最近在工作中遇到了这样一个情景。有些数据是从后台读取的,但是我暂时不需要展示在页面上,那怎么办呀?——缓存呀。今天我就来分享一下我所了解的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();
}
}
执行结果:
---------------------------------------------------
预计结果:
姓名:zhangsan
姓名:lisi
姓名:lisi 年方:22 家住:xx市xx街xx号
姓名1:lisi ,姓名2:zhangsan
点击这个可以在线查看运行结果。