将js数据比如ajax请求来的数据缓存起来,原来是用一个全局变量__data来存储,现在基于jquery写的两种实现方式。
cache这种方式是很普遍的一种实现方式,icache是将数据缓存到dom中,在使用的过程中依赖json.js可以缓存多种类型的数据。
cache和icache有一个差别是icache需要检验key和value,这是因为将数据写入dom时需要将不同类型的数据先转换为字符串,这也是可能需要json.js的原因。
例子,js实现页面数据缓存的代码。
/**
* cache.
* page data cache in cache.
*/
(function($) {
$.cache = {};
$.extend($.cache, {
map : {},
push : function(key, value) {
$.cache.map[key] = value;
},
remove : function(key) {
delete($.cache.map[key]);
},
clear : function() {
$.cache.map = {};
},
get : function(key) {
return $.cache.map[key];
}
});
})(jQuery);
/**
* icache.
* page data cache in dom.
*/ www.jb200.com
(function($) {
$.icache = {};
$.extend($.icache, {
validStr : function(str) {
return typeof(str) == 'string' ? true : false;
},
data : {
containerId :'icacheContainer'
},
enable : function() {
if ($('#' + $.icache.data.containerId).length != 0) return;
var container = $('<div>').attr('id', $.icache.data.containerId).hide();
$('body').append(container);
},
getContainer : function() {
$.icache.enable();
return $('#' + $.icache.data.containerId);
},
push : function(key, value) {
if (!$.icache.validStr(key) || !$.icache.validStr(value)) return;
var container = $.icache.getContainer();
var e = container.find('#' + key);
if (e.length == 0) e = $('<div>').attr('id', key).appendTo(container);
e.html(value);
},
get : function(key) {
return $.icache.getContainer().find('#' + key).html();
},
remove : function(key) {
$.icache.getContainer().find('#' + key).remove();
},
clear : function() {
$.icache.getContainer().empty();
}
});
})(jQuery);