當自定義數據屬性為json格式字符串時jQuery的data api問題探討
2024-05-06 14:19:39
供稿：網友
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}
