我使用jQuery存储数据有什么优势吗？

我知道更多关于jQuery如何存储数据的信息。

做其中一个或另一个有什么好处：

$('#editCity').data('href', "xx"); var a = $('#editCity').data('href'); 

要么

 $('#editCity').attr('data-href', "xx"); var a = $('#editCity').attr('data-href'); 

还有一个相关的问题。

如果我有这个：

 var modal = { x: 'xx', y: 'yy' }; 

我还可以使用.data（..）存储吗？

Answer 1

直接在DOM元素上存储属性值是有风险的，因为可能存在内存泄漏。 无论如何，如果你正在使用jQuery， .data()机制是跟踪每个元素信息的一种美妙而安全的方法。 它也允许存储任意JavaScript数据结构，而不仅仅是字符串。

编辑 – 当您的HTML标记包含data-foo属性时，在访问密钥时会隐式读取这些属性。 也就是说，如果你的HTML看起来像这样：

然后在jQuery中：

 alert( $('#div1').data('purpose') ); // alerts "container" 

此外，jQuery还将对属性值进行一些“智能”分析。 如果值看起来像数字，jQuery将返回一个数字，而不是一个字符串。 如果它看起来像JSON，它会为您反序列化JSON。

编辑 – 这是一个很好的技巧：在Chrome开发人员控制台（“控制台”视图）中，您可以键入JavaScript表达式并对其进行评估。 评估始终在您正在处理的页面的上下文中完成。 如果从“元素”视图中选择一个元素，那么在控制台中，JavaScript符号$0将引用所选的DOM元素。 因此，您始终可以通过访问控制台并键入以下内容来检查元素的“数据”映射：

 $($0).data("something"); 

.data()函数，如果没有参数调用，则返回所有键/值对：

 $($0).data(); 

Answer 2

关于数据函数最有趣的一点是你可以添加任何类型的对象，例如你的modal 。 如文档中所述 ，jQuery在DOM更改时负责避免内存泄漏：

jQuery.data（）方法允许我们以一种不受循环引用安全的方式将任何类型的数据附加到DOM元素，从而避免内存泄漏。

对于字符串，内存泄漏是不可能的，但主要区别在于第一个解决方案更清晰（如果您可能存储除应用程序其他部分中的字符串之外的其他数据则更连贯），更清晰（意图明显），并且不会t强制CSS计算（DOM未更改）。

Answer 3

它们都有优势……也就是说，99％的时间你应该使用.data('whatever', value)

使用.data('whatever', value)优点：

• 不太容易导致内存泄漏，因为它没有使用DOM。
• 从内存中提取数据的速度比从DOM中提取数据快一些。
• 可以在其中放置任何类型的对象，而无需先将其序列化为JSON。

使用.attr('data-whatever', value)优点：

• 兼容.data('whatever')
• 允许您通过值选择元素： $('[data-whatever=foo]')
• 您可以在其中放置任何对象，但如果它是复杂类型，则需要序列化。