2022年页面js数据缓存 .pdf

页面 js数据缓存将 js 数据比如 ajax请求来的数据缓存起来是很早就开始做的事情，原来是用一个全局变量 _data来存储，现在基于jquery 写的两种实现方式。 cache这种方式是很普遍的一种实现方式， icache是将数据缓存到 dom中，在使用的过程中依赖json.js可以缓存多种类型的数据。cache和 icache有一个差别是 icache需要检验key和 value，这是因为将数据写入dom 时需要将不同类型的数据先转换为字符串，这也是可能需要json.js的原因。/* * cache. * page data cache in cache. */ (function($) $.cache = ; $.extend($.cache, map : , push : function(key, value) $.cache.mapkey = value; , 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 5 页 - - - - - - - - - remove : function(key) delete($.cache.mapkey); , clear : function() $.cache.map = ; , get : function(key) return $.cache.mapkey; ); )(jQuery); /* * icache. * page data cache in dom. */ 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 5 页 - - - - - - - - - (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 = $().attr(id, $.icache.data.containerId).hide(); $(body).append(container); , getContainer : function() $.icache.enable(); 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 5 页 - - - - - - - - - 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 = $().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(); 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 5 页 - - - - - - - - - ); )(jQuery); 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 5 页 - - - - - - - - -