當(dāng)自定義數(shù)據(jù)屬性為json格式字符串時(shí)jQuery的data api問(wèn)題探討
更新時(shí)間：2013年02月18日 09:22:04 作者：
當(dāng)自定義數(shù)據(jù)屬性是一個(gè) json 格式字符串時(shí)，緩存的數(shù)據(jù)如果被修改， 則修改后的數(shù)據(jù)繼續(xù)存在于緩存系統(tǒng)中， 如果不留意，這可能導(dǎo)致一些BUG，接下來(lái)將對(duì)此問(wèn)題詳細(xì)概述下
jQuery 的 data API 實(shí)現(xiàn)方式有緩存數(shù)據(jù)的效果
使用 IE 7 （IE8+ 在控制臺(tái)切換至IE7 模式），當(dāng)DOM 節(jié)點(diǎn)有自定義數(shù)據(jù)屬性時(shí)，檢查 DOM 節(jié)點(diǎn)即可看到 形如 jQuery18305664906559272507 的屬性，這便是 用于從數(shù)據(jù)存儲(chǔ)對(duì)象中獲取自定義數(shù)據(jù)的建。
當(dāng)自定義數(shù)據(jù)屬性是一個(gè) json 格式字符串時(shí)，緩存的數(shù)據(jù)如果被修改， 則修改后的數(shù)據(jù)繼續(xù)存在于緩存系統(tǒng)中， 如果不留意，這可能導(dǎo)致一些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>
運(yùn)行結(jié)果
{"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}
使用 IE 7 （IE8+ 在控制臺(tái)切換至IE7 模式），當(dāng)DOM 節(jié)點(diǎn)有自定義數(shù)據(jù)屬性時(shí)，檢查 DOM 節(jié)點(diǎn)即可看到 形如 jQuery18305664906559272507 的屬性，這便是 用于從數(shù)據(jù)存儲(chǔ)對(duì)象中獲取自定義數(shù)據(jù)的建。
當(dāng)自定義數(shù)據(jù)屬性是一個(gè) json 格式字符串時(shí)，緩存的數(shù)據(jù)如果被修改， 則修改后的數(shù)據(jù)繼續(xù)存在于緩存系統(tǒng)中， 如果不留意，這可能導(dǎo)致一些BUG
復(fù)制代碼 代碼如下:
<!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>
運(yùn)行結(jié)果
復(fù)制代碼 代碼如下:
{"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}
您可能感興趣的文章:
- Spring Data Jpa+SpringMVC+Jquery.pagination.js實(shí)現(xiàn)分頁(yè)示例
- jQuery.datatables.js插件用法及api實(shí)例詳解
- jQuery購(gòu)物車插件jsorder用法(支持后臺(tái)處理程序直接轉(zhuǎn)換成DataTable處理)
- jQuery ajax dataType值為text json探索分享
- Python requests.post方法中data與json參數(shù)區(qū)別詳解
- JS中FormData類實(shí)現(xiàn)文件上傳
- thinkphp5 + ajax 使用formdata提交數(shù)據(jù)（包括文件上傳） 后臺(tái)返回json完整實(shí)例
- JS JQuery獲取data-*屬性值方法解析
相關(guān)文章
layui屬于輕量級(jí)框架,簡(jiǎn)單美化.是用于開(kāi)發(fā)后端模式,它在服務(wù)端頁(yè)面上有非常好的效果，這篇文章主要介紹了layUI布局使用教程,需要的朋友可以參考下2022-09-09
之前在獲取元素屬性時(shí),踩了個(gè)坑,記錄一下,下面這篇文章主要給大家介紹了關(guān)于JS字符串截取出現(xiàn)的bug以及解決方式,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
如何防止JavaScript自動(dòng)插入分號(hào)
JavaScript語(yǔ)言有一個(gè)機(jī)制：在解析時(shí)，能夠在一句話后面自動(dòng)插入一個(gè)分號(hào)，用來(lái)修改語(yǔ)句末尾遺漏的分號(hào)分隔符。然而，由于這個(gè)自動(dòng)插入的分號(hào)與JavaScript語(yǔ)言的另一個(gè)機(jī)制發(fā)生了沖突，即所有空格符都被忽略，因此程序可以利用空格格式化代碼2015-11-11
JS實(shí)現(xiàn)側(cè)邊欄鼠標(biāo)經(jīng)過(guò)彈出框+緩沖效果
本文主要介紹了JS實(shí)現(xiàn)側(cè)邊欄鼠標(biāo)經(jīng)過(guò)彈出框+緩沖效果的實(shí)現(xiàn)原理與方法步驟。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-03-03
純?cè)鷍s實(shí)現(xiàn)table表格的增刪
本文主要介紹了純?cè)鷍avascript實(shí)現(xiàn)table表格的增刪的方法，文章底部提供了完整的代碼。需要的朋友一起來(lái)看下吧2017-01-01
用js直接區(qū)分網(wǎng)頁(yè)布局代碼，大家可以看下他的原理2008-10-10
這篇文章主要介紹了ES6 javascript的異步操作,結(jié)合實(shí)例形式分析了ES5中異步操作的概念、原理、使用方法及相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-10-10
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)京東放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
改版了網(wǎng)上的一個(gè)js操作userdata
改版了網(wǎng)上的一個(gè)js操作userdata,并根據(jù)其它網(wǎng)友的文章結(jié)合了下。希望對(duì)需要的朋友有所幫助。2007-04-04
微信小程序云開(kāi)發(fā)使用方法新手初體驗(yàn)
微信小程序云開(kāi)發(fā)使用方法新手初體驗(yàn)，開(kāi)發(fā)者可以使用云開(kāi)發(fā)開(kāi)發(fā)微信小程序、小游戲，無(wú)需搭建服務(wù)器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05