js页面数据缓存实例

发布时间:2019-07-28编辑:脚本学堂
本文介绍了js控制页面数据缓存的方法,cache这种方式是很普遍的一种实现方式,icache是将数据缓存到dom中,在使用的过程中依赖json.js可以缓存多种类型的数据。

将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);