jQuery缓存数据——仿Map

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

       最近在工作中遇到了这样一个情景。有些数据是从后台读取的,但是我暂时不需要展示在页面上,那怎么办呀?——缓存呀。今天我就来分享一下我所了解的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();}}

       这段代码采用了面向对象的思想,提供了get、update、append、remove等方法,并 对方法进行了封装,足够满足你的需求。测试代码如下:

<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>

       点击这个可以在线查看运行结果。

版权声明:本文为博主原创文章,未经博主允许不得转载。

转载于:https://my.oschina.net/u/2260184/blog/518490

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/262657.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Jsoup快速查询

一、selector选择器 二、Xpath查询 转载于:https://www.cnblogs.com/wmqiang/p/11568184.html

Servlet生命周期和方法

一、五个生命周期方法&#xff0c;有三个很重要&#xff0c;初始化方法、提供服务方法和销毁方法 1、三个主要方法 2、另外两个重写的成员方法只做了解 二、生命周期详解 其中&#xff0c;每次刷新页面都是一次对servlet访问&#xff1b; 页面访问&#xff0c;根据域名找到主机…

Servlet3.0注解配置访问路径和urlParttern配置

一、Servlet用注解配置访问路径 二、IDEA的tomcat相关配置 其中&#xff0c;第一点的配置文件&#xff0c;直接在IDEA的可视化操作界面修改就可以改掉配置文件中内容&#xff1b; 三、urlParttern配置 其中&#xff0c;* 时通配符&#xff0c;优先级最低&#xff1b; 转载于:ht…

现货黄金入门知识普及一:图形分析之K线理论

&#xff2b;线又称阴阳线、棒线、红黑线或蜡烛线&#xff0c;最早起源于日本德川幕府时代的米市交易&#xff0c;经过二百多年的演进&#xff0c;现已广泛应用于证券市场的技术分析中&#xff0c;成为技术分析中的最基本的方法之一&#xff0c;从而形成了现在具有完整形式和分…

openssl工具的使用以及创建私有CA

openssl软件包在安装之后&#xff0c;主要会生成三段重要内容&#xff1a;加密库ssl相关库文件openssl命令行工具下面就来介绍一下openssl命令行工具的使用&#xff1a;openssl和yum类似&#xff0c;有着许许多多的子命令&#xff1a;如果要获得这些子命令的相关man文档&#x…

Servlet体系结构

一、使用HttpServlet 其中&#xff0c;HttpServlet在重写的service()方法中对http请求的共7中提交方式进行了判断&#xff0c;所以只要我们只要重写对应的请求方式处理逻辑方法 doGet()和doPost()方法就可以&#xff1b; 浏览器直接访问servelet是get请求&#xff0c;参数列表会…

HTTP快速入门

一、tomcat端口号设置为80&#xff0c;访问时候可以不加&#xff1b;http协议1.1版本可以复用连接&#xff0c;请求结束后会稍微等会&#xff1b; 二、 表单&#xff0c;get方式提交&#xff1a; 三、user-agent告诉服务器是哪个浏览器&#xff0c;代码中解决兼容性问题&#x…

分类(二):基于向量空间模型的文本分类

2019独角兽企业重金招聘Python工程师标准>>> 利用向量空间模型进行文本分类的思路主要基于邻近假设&#xff08;contiguity hypothesis&#xff09;。 邻近假设&#xff1a; 同一类的文档会构成一个邻近区域&#xff0c;而不同类的邻近区域之间是互不重叠的。 1、Ro…

Request请求对象

一、Request对象由服务器创建&#xff0c;我们使用 浏览器访问服务器资源原理&#xff1a; 二、Request体系结构 其中&#xff0c;servlet 的service()方法参数列表是 servletRequest对象&#xff0c; HttpServlet 的 doGet()和 doPost() 方法参数列表是用的 HttpServletReques…

Walle 瓦力 web部署系统

Walle 一个web部署系统工具&#xff0c;可能也是个持续发布工具&#xff0c;配置简单、功能完善、界面流畅、开箱即用&#xff01; 安装步骤&#xff1a; 1. git clone 首先配置成功&#xff08;去百度找答案&#xff09; 打开git bash命令窗口执行&#xff1a; git clone gitg…

mysqlbinlog恢复误删数据

概述 代码bug&#xff0c;在处理上传出现异常时执行了DELETE FROM t_resource WHERE resource_id ? OR parent_id &#xff1f;因为OR条件导致用户的上传的所有数据被清空了。 show 查看是否有开启log-bin备份 show variables like log_bin 欣慰的是&#xff0c;已经开启了二…

Quartz.NET 架构与源代码分析系列 part 1 :Quartz.NET 入门

概述 作业调度的目标在于按照预先确定的时间和指定的顺序来确保高效的数据处理流程&#xff0c;从而最大限度的使用系统资源。批处理流程是一种在无需最终用户干预的方式下在后台通过顺序方式运行的操作。 Windows XP系统也自带了“任务计划”&#xff0c;它是一个简单任务调度…

Request登录案例

一、分析和设计 1、需求 2、页面 3、druid连接池 4、jar包 5、需求设计 二、代码实现 1、web_WEB-INFO_lib使用之前要先将jar包加入工作空间&#xff0c; 2、JDBC工具类 3、Dao层持久化层 其中&#xff0c;有异常除了输出控制台日志&#xff0c;还可以输出流写入到一个文件中记…

基于winpcap的NDIS在IE浏览器,360安全浏览器hackwww.360.cn

winpcap(windows packet capture)是windows平台下一个免费&#xff0c;公共的网络访问系统。开发winpcap这个项目的目的在于为win32应用程序提供访问网络底层的能力。winpcap 驱动各项功能1. 捕获原始数据包&#xff0c;包括在共享网络上各主机发送/接收的以及相互之间交换的数…

斑马Zebra驱动下载

Zebra GT800 点击进入下载页-> 自动安装包【WINXP/WIN7/WIN8】点击进入下载页-> 添加打印机向导【WINXP/WIN7/WIN8】热门下载 Zebra GK888t Zebra 888-TT/888-DT Zebra 105SL Zebra ZM400 Zebra TLP 2844 Zebra GT800 Zebra GK888d Zebra LP 2844 Zebra Z4Mplus Zebra S4…

HTTP响应消息

一、数据格式 二、相应行状态码 其中&#xff0c;304常见于请求图片&#xff0c;一个图片就是一次请求&#xff0c;但是后面再请求若服务器图片没有修改&#xff0c;则304&#xff0c;访问本地缓存&#xff1b; 500一般见于服务器代码异常&#xff0c;如3/0&#xff1b; 三、响…

javafx如何调节按钮位置_安全带高度调节器的小知识

对于开车的小伙伴对安全带已经再熟悉不过了&#xff0c;但是有很多车&#xff0c;在安全带上有一个小秘密&#xff0c;那就是高度调节器。高度调节器的作用&#xff1a;为了调节安全带上固定点的高度&#xff0c;使安全带能够适应不同体格的乘员&#xff0c;都能达到最好的保护…

Response对象

一、输出流返回响应数据 二、重定向 1、重定向代码以及和转发的区别 2、相对路径 ./ 和 / 都是表示当前路径下 3、绝对路径 三、Response输出数据 1、字符输出流 其中&#xff0c;浏览器打开默认和操作系统使用一样的GBK编码字符集&#xff08;国标码&#xff0c;中文&#xf…

combox 增加请选择_本命佛怎么请?

佛&#xff0c;从古到今都是人们在憧憬美好未来时一种精神上的象征&#xff0c;它能为世间众生带来好运。而我们所知道的本命佛是与十二生肖属相感应力较强的佛&#xff0c;佩戴与自己生肖相对应的本命佛具有增加财运&#xff0c;保佑健康平安、守护家庭和睦的作用。所以很多人…