当自定义数据属性为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 相关文章推荐
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 Javascript
javascript 面向对象的JavaScript类
May 04 Javascript
js定时器怎么写?就是在特定时间执行某段程序
Oct 11 Javascript
js实现浏览本地文件并显示扩展名的方法
Aug 17 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
Nov 15 Javascript
JS组件Form表单验证神器BootstrapValidator
Jan 26 Javascript
灵活的理解JavaScript中的this指向
Feb 25 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 Javascript
微信小程序上传多图到服务器并获取返回的路径
May 05 Javascript
layui实现左侧菜单点击右侧内容区显示
Jul 26 Javascript
微信小程序实现图片压缩
Dec 03 Javascript
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 Javascript
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
解析file_get_contents模仿浏览器头(user_agent)获取数据
2013/06/27 PHP
thinkphp 一个页面使用2次分页的实现方法
2013/07/15 PHP
Discuz不使用插件实现简单的打赏功能
2019/03/21 PHP
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
JS获取整个页面文档的实现代码
2011/12/15 Javascript
使用js解决由border属性引起的div宽度问题
2013/11/26 Javascript
网页收藏夹显示ICO图标(代码少)
2015/08/04 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
2015/10/20 Javascript
灵活的理解JavaScript中的this指向
2016/02/25 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
2017/02/28 Javascript
vue.js使用3DES加密的方法示例
2018/05/18 Javascript
使用layer.msg 时间设置不起作用的解决方法
2019/09/12 Javascript
vue.js路由mode配置之去掉url上默认的#方法
2019/11/01 Javascript
[03:55]DOTA2完美大师赛选手传记——LFY.MONET
2017/11/18 DOTA
Python抽象和自定义类定义与用法示例
2018/08/23 Python
python实现代码统计程序
2019/09/19 Python
Python数据可视化:泊松分布详解
2019/12/07 Python
Django表单提交后实现获取相同name的不同value值
2020/05/14 Python
python操作redis数据库的三种方法
2020/09/10 Python
使用OpenCV校准鱼眼镜头的方法
2020/11/26 Python
中国旅游网站:同程旅游
2016/09/11 全球购物
Expedia挪威官网:酒店、机票和租车
2018/03/03 全球购物
KIKO MILANO俄罗斯官网:意大利领先的化妆品和护肤品品牌
2021/01/09 全球购物
腾讯技术类校园招聘笔试试题
2014/05/06 面试题
预备党员思想汇报范文
2013/12/29 职场文书
学术会议主持词
2014/03/17 职场文书
六一儿童节主持词
2014/03/21 职场文书
电脑售后服务承诺书
2014/03/27 职场文书
酒店七夕情人节活动策划方案
2014/08/24 职场文书
员工试用期自我评价
2014/09/18 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
李强优秀员工观后感
2015/06/16 职场文书
2015年七夕情人节感言
2015/08/03 职场文书
深入理解python协程
2021/06/15 Python
Golang 对es的操作实例
2022/04/20 Golang