本文探讨 jQuery 的 data API 在读取 DOM 自定义 data 属性时的缓存行为。当属性值为 JSON 字符串时，jQuery 会将其解析为对象并存入内部缓存。若直接修改该缓存对象，后续通过 data() 获取的仍是修改后的缓存版本，而重新从 DOM 读取则得到原始字符串。这种不一致性可能导致逻辑错误，建议通过 JSON.parse 重新解析以获取最新 DOM 状态。
jQuery data API 缓存机制与 JSON 字符串数据修改陷阱
jQuery 的 data API 具备内部缓存机制，用于存储和检索数据。
在 IE 7 浏览器（或 IE8+ 切换至 IE7 模式）中，若 DOM 节点包含自定义 data 属性，检查 DOM 节点时可见形如 jQuery18305664906559272507 的属性名。该属性是 jQuery 用于从内部数据存储对象中获取自定义数据的键值标识。
当自定义 data 属性的值为 JSON 格式字符串时，jQuery 会将其解析并缓存。若代码中直接修改了缓存中的对象，修改后的数据会保留在缓存系统中。若开发者未注意到这一缓存行为，直接依赖 data() 方法获取数据，可能会因获取到已修改的缓存对象而非原始 DOM 属性而产生逻辑错误（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}