jQuery缓存数据——仿Map
2015-07-31 09:05
721 查看
最近在工作中遇到了这样一个情景。有些数据是从后台读取的，但是我暂时不需要展示在页面上，那怎么办呀？——缓存呀。今天我就来分享一下我所了解的Jquery缓存数据的方法。
首先分享1篇博文——《读jQuery之六（缓存数据）》，还有2个文档：Jquery中的.data()方法，以及jQuery.data()方法。通过这些资料，你应该就会对缓存数据有了一定的了解。具体的介绍文档里已经说的很清楚了，我要分享的是自己写的一些js方法。
在JAVA开发中，我们需要缓存数据，一般都选择放在了Map中。就算是放在各种缓存框架，也基本上都是以Key/Value的方式存放起来的。既然现在要在页面上缓存数据，那么我们就模仿Map来实现缓存数据的功能吧。
jQuery.data()是一个底层的方法，所以我们尽量使用.data()的方法来完成这个功能。方法说明如下：
根据说明，进行存储数据。由于是做缓存的，属于页面全局所有的。所以元素就选择body。具体代码如下：
[javascript] view
plaincopy
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();
}
}
这段代码采用了面向对象的思想，提供了get、update、append、remove等方法，并对方法进行了封装，足够满足你的需求。测试代码如下：
[html] view
plaincopy
<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>
点击这个可以在线查看运行结果。
首先分享1篇博文——《读jQuery之六（缓存数据）》，还有2个文档：Jquery中的.data()方法，以及jQuery.data()方法。通过这些资料，你应该就会对缓存数据有了一定的了解。具体的介绍文档里已经说的很清楚了，我要分享的是自己写的一些js方法。
在JAVA开发中，我们需要缓存数据，一般都选择放在了Map中。就算是放在各种缓存框架，也基本上都是以Key/Value的方式存放起来的。既然现在要在页面上缓存数据，那么我们就模仿Map来实现缓存数据的功能吧。
jQuery.data()是一个底层的方法，所以我们尽量使用.data()的方法来完成这个功能。方法说明如下：
根据说明，进行存储数据。由于是做缓存的，属于页面全局所有的。所以元素就选择body。具体代码如下：
[javascript] view
plaincopy
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();
}
}
这段代码采用了面向对象的思想，提供了get、update、append、remove等方法，并对方法进行了封装，足够满足你的需求。测试代码如下：
[html] view
plaincopy
<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>
点击这个可以在线查看运行结果。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery的ready ()的几种写法
- jQuery图片翻转弹出动画特效
- 点击页面其它地方隐藏div所想到的jQuery的delegate
- jquery 如何设置下拉框隐藏
- 轻量级网页遮罩层jQuery插件用法实例
- jquery模拟alert的弹窗插件
- jquery实现手机号码选号的方法
- jquery-tips悬浮提示插件分享
- jQuery+css3实现文字跟随鼠标的上下抖动
- jquery实现仿JqueryUi可拖动的DIV实例
- Jquery实现瀑布流布局（备有详细注释）
- JQuery选择器，选择ID以xx开头的一组标签
- ASP.NET MVC - 客户端验证：jQuery的验证
- jquery mobile常用的data-role类型介绍
- jQuery实现对P标签的操作
- jQuery入门知识点
- jquery
- jQuery入门学习总结
- jQuery基本动画效果
- 10款很好用的 jQuery 图片滚动插件