当自定义数据属性为json格式字符串时jQuery的data api问题探讨


Posted in Javascript onFebruary 18, 2013

jQuery 的 data API 实现方式有缓存数据的效果
使用 IE 7 (IE8+ 在控制台切换至IE7 模式),当DOM 节点有自定义数据属性时,检查 DOM 节点即可看到 形如 jQuery18305664906559272507 的属性,这便是 用于从数据存储对象中获取自定义数据的建。

当自定义数据属性是一个 json 格式字符串时,缓存的数据如果被修改, 则修改后的数据继续存在于缓存系统中, 如果不留意,这可能导致一些BUG

<!DOCTYPE HTML> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.8.3.js"></script> 
</head> 
<body> 
<input type="hidden" value="" data-json='{"a":123,"b":456}' id="tst" /> 
<script> 
var node = $("#tst"); 
console.log(node.attr("data-json")); 
var data = node.data("json"); 
console.log(data); 
data.b = 'hello'; 
var data1 = JSON.parse(node.attr("data-json")); 
console.log(data1); 
console.log('data===data1',data===data1); 
var data2 = node.data("json"); 
console.log(data2); 
console.log('data===data2',data===data2); 
var data3 = JSON.parse(node.attr("data-json"));//这样取值不受缓存影响 
console.log(data3); 
</script> 
</body> 
</html>

运行结果
{"a":123,"b":456} 
Object {a: 123, b: 456} 
Object {a: 123, b: 456} 
data===data1 false 
Object {a: 123, b: "hello"} 
data===data2 true 
Object {a: 123, b: 456}
Javascript 相关文章推荐
用javascript getComputedStyle获取和设置style的原理
Oct 10 Javascript
JS 图片缩放效果代码
Jun 09 Javascript
jQuery$命名冲突怎么办如何解决
Jan 16 Javascript
js实现文本框支持加减运算的方法
Aug 19 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
May 16 Javascript
Express框架之connect-flash详解
May 31 Javascript
vue实现移动端图片裁剪上传功能
Aug 18 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
Jul 13 Javascript
基于Vue+element-ui 的Table二次封装的实现
Jul 20 Javascript
vue 解除鼠标的监听事件的方法
Nov 13 Javascript
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 jQuery
jQuery筛选器children()案例详解(图文)
Feb 17 #Javascript
正则表达式搭配js轻松处理json文本方便而老古
Feb 17 #Javascript
jQuery图片播放8款精美插件分享
Feb 17 #Javascript
jQuery性能优化28条建议你值得借鉴
Feb 16 #Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
Feb 16 #Javascript
js nextSibling属性和previousSibling属性概述及使用注意
Feb 16 #Javascript
jQuery事件绑定.on()简要概述及应用
Feb 07 #Javascript
You might like
PHP5权威编程阅读学习笔记 附电子书下载
2012/07/05 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
关于PHP中Session文件过多的问题及session文件保存位置
2016/03/17 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
PHP 图片处理
2020/09/16 PHP
Aster vs KG BO3 第一场2.18
2021/03/10 DOTA
服务器安全设置的几个注册表设置
2007/07/28 Javascript
JS 遮照层实现代码
2010/03/31 Javascript
我的Node.js学习之路(一)
2014/07/06 Javascript
js实现延时加载Flash的方法
2015/11/26 Javascript
Windows 系统下设置Nodejs NPM全局路径
2016/04/26 NodeJs
基于Jquery插件Uploadify实现实时显示进度条上传图片
2020/03/26 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
2016/09/28 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
2017/04/25 Javascript
vue iView 上传组件之手动上传功能
2018/03/16 Javascript
vue实现Excel文件的上传与下载功能的两种方式
2019/06/28 Javascript
[00:47]TI7不朽珍藏III——沙王不朽展示
2017/07/15 DOTA
[52:44]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第一场 6.3
2018/06/04 DOTA
使用 Python 获取 Linux 系统信息的代码
2014/07/13 Python
使用Python的urllib2模块处理url和图片的技巧两则
2016/02/18 Python
Python正则抓取网易新闻的方法示例
2017/04/21 Python
python如何创建TCP服务端和客户端
2018/08/26 Python
Python找出微信上删除你好友的人脚本写法
2018/11/01 Python
Python比较配置文件的方法实例详解
2019/06/06 Python
Python3 pickle对象串行化代码实例解析
2020/03/23 Python
亚马逊中国官方网站:amazon.cn
2017/05/25 全球购物
比利时香水网上商店:NOTINO
2018/03/28 全球购物
学习十八大精神心得体会
2013/12/31 职场文书
xxx同志考察材料
2014/02/07 职场文书
降消项目实施方案
2014/03/30 职场文书
党的群众路线个人对照检查材料
2014/09/23 职场文书
2015年超市收银员工作总结
2015/04/25 职场文书
如何写新闻稿
2015/07/18 职场文书
Golang 获取文件md5校验的方法以及效率对比
2021/05/08 Golang
python入门学习关于for else的特殊特性讲解
2021/11/20 Python
Python中的协程(Coroutine)操作模块(greenlet、gevent)
2022/05/30 Python