在DOM中存储数据的正确方法是什么

I have recently been using the title tag in various HTML elements to store data in JSON format in the DOM.

我最近在各种HTML元素中使用title标签在DOM中以JSON格式存储数据。

Is this a bad approach (I am assuming it is)? What is the correct way to accomplish this that works well with jQuery? By "works well" I mean

这是一个不好的方法（我假设它是）？实现这一点的正确方法是什么，适用于jQuery？我的意思是“运作良好”

$("myButton").click(function (e) {
     var myData;
     eval("myData=" + $(this).attr("title"));
});

Works pretty well but again I am assuming there is a better way to do this no?

工作得很好，但我再次假设有一个更好的方法来做到这一点没有？

PS: BTW how does the title tag of HTML elements actually work? I cant seem to find where it actually ends up getting used?

PS：BTW HTML元素的标题标签实际上如何工作？我似乎无法找到它实际上最终被使用的地方？

PSS: Can I also get a jQuery based and Non jQuery response? (Sorry to be fussy)

PSS：我还可以获得基于jQuery和非jQuery的响应吗？（抱歉要挑剔）

4 个解决方案

#1

eval("myData=" + $(this).attr("title"));

This is almost a legal reason to slap you! (j/k)

这几乎是打击你的法律理由！（J / K）

You should use your own namespace object to store data "globally". In that context, globally means only global in your application code and not using the global object (window in a browser).

您应该使用自己的命名空间对象来“全局”存储数据。在该上下文中，全局仅表示应用程序代码中的全局，而不是使用全局对象（浏览器中的窗口）。

var my_application = {};

$('myButton').click(function() {
  my_application.myData = $(this).attr('title');
});

This is a very basic strategy of course. In your particular case, you can also use jQuery's .data() method to attach data to a DOM node.

当然，这是一个非常基本的策略。在您的特定情况下，您还可以使用jQuery的.data（）方法将数据附加到DOM节点。

$('myButton').click(function() {
   $.data(this, 'myData', this.title);
});

Ref.: .data(), jQuery.data()

参考：.data（），jQuery.data（）

#2

In your example, I'd suggest doing the following which does not expose you to the security risks of 'eval':

在您的示例中，我建议执行以下操作，但不会使您暴露于'eval'的安全风险：

myData = JSON.decode($(this).attr("title"));

In general it's a valid approach to holding non-secure data. You have a number of other options too:

通常，这是保存非安全数据的有效方法。您还有许多其他选项：

Use JQuery's .data() methods:

使用JQuery的.data（）方法：

myData = $this.data("foo");

myData = $ this.data（“foo”）;
In HTML5 you now can use custom data attributes (Eg "") as an attribute on any element. http://html5doctor.com/html5-custom-data-attributes/

在HTML5中，您现在可以使用自定义数据属性（例如“”）作为任何元素的属性。 http://html5doctor.com/html5-custom-data-attributes/
You could use Local Storage if you know it is available. http://dev.w3.org/html5/webstorage/

如果您知道它可用，您可以使用本地存储。 http://dev.w3.org/html5/webstorage/
You could use Backbone.js on top of Jquery to give you a more abstracted way of handling your data as Models. http://documentcloud.github.com/backbone/

您可以在Jquery之上使用Backbone.js为您提供一种更抽象的方式来处理您的数据作为模型。 http://documentcloud.github.com/backbone/

#3

use jquery data()

使用jquery数据（）

The jQuery.data() method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore free from memory leaks. jQuery ensures that the data is removed when DOM elements are removed via jQuery methods, and when the user leaves the page. We can set several distinct values for a single element and retrieve them later:

jQuery.data（）方法允许我们以一种不受循环引用安全的方式将任何类型的数据附加到DOM元素，从而避免内存泄漏。 jQuery确保在通过jQuery方法删除DOM元素时以及当用户离开页面时删除数据。我们可以为单个元素设置几个不同的值，并在以后检索它们：

jQuery.data(document.body, 'foo', 52);

#4

In the jQuery world it is usually said to be a best practice to use the metadata plugin as it is an official jQuery plugin and also supports HTML5 data attributes. For more info you could look at this http://docs.jquery.com/Plugins/Metadata/metadata

在jQuery世界中，它通常被认为是使用元数据插件的最佳实践，因为它是官方jQuery插件并且还支持HTML5数据属性。有关更多信息，请查看此http://docs.jquery.com/Plugins/Metadata/metadata

#1

eval("myData=" + $(this).attr("title"));