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