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

Question

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

这是一个不好的方法(我假设它是)？实现这一点的正确方法是什么,适用于jQuery？我的意思是"运作良好"

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

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

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

PSS:我还可以获得基于jQuery和非jQuery的响应吗？(抱歉要挑剔)

Answer 1

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

这几乎是打击你的法律理由!(J/K)

您应该使用自己的命名空间对象来"全局"存储数据.在该上下文中,全局仅表示应用程序代码中的全局,而不是global object(window在浏览器中).

var my_application = {};

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

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

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

参考:.data(),jQuery.data()

Answer 2

在您的示例中,我建议执行以下操作,不会让您面临'eval'的安全风险:

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

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

• 使用JQuery的.data()方法:

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

• 在HTML5中,您现在可以使用自定义数据属性(例如"")作为任何元素的属性.http://html5doctor.com/html5-custom-data-attributes/

• 如果您知道本地存储可用,则可以使用本地存储.http://dev.w3.org/html5/webstorage/

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