在 HTML 中存储任意数据

Question

在 html 元素中嵌入数据以供以后使用的最佳方法是什么？

举个例子，假设我们有 jQuery 从服务器返回一些 JSON，并且我们想将该数据作为段落转储给用户。但是，我们希望能够将元数据附加到这些元素，以便稍后为这些元素设置事件。

我倾向于使用一些丑陋的前缀来处理这个问题

function handle_response(data) {
    var html = '';
    for (var i in data) {
        html += '<p id="prefix_' + data[i].id + '">' + data[i].message + '</p>';
    }
    jQuery('#log').html(html).find('p').click(function(){
            alert('The ID is: ' + $(this).attr('id').substr(7));
    });
}

或者，您可以在段落中构建一个表单，并将您的元数据存储在那里。但是，这常常让人觉得有点矫枉过正。

以前有人以不同的方式问过这个问题，但我觉得没有得到很好的回答：

• How to store arbitrary data for some HTML tags
• Non-Standard Attributes on HTML Tags. Good Thing? Bad Thing? Your Thoughts?

Answer 1

HTML5 现在支持 data-name 语法来存储任意数据而无需非标准自定义属性

如果您的文档类型不是 HTML5（尽管有一些解决方法），这当然会破坏验证，但它不会影响我遇到的任何浏览器中的呈现或解析。

这里有一个excellent article by John Resig 讨论此事

Answer 2

假设您停留在页面上...

jQuery 有一个数据函数，它允许您通过键将数据存储在元素上。例如

$('#mydiv').data('mykey', mydata);

使用以下语法检索数据：

var x = $('#mydiv').data('mykey');

如果您不知道要使用哪个元素，请使用$(document)

Answer 3

我常用的一种方法（代替 HTML5 的数据功能）是利用隐藏的输入标签，例如。

<a href="#" id="containing_element">
Content
<input type="hidden" id="key" value="value" />
</a>

那么，如果你不介意一个 jQuery 例子..

$('a#containing_element').click(function(){
     var data = $(this).children('input#key').attr('value');
});

简单，它验证，它现在可以工作，您可以使用它来存储您喜欢的任何类型的信息（即使是数组，如果您对它们进行序列化和htmlencode）

Answer 4

根据元数据的用途，您可以开始向段落添加类：

<p class="some-paragraph meta meta2 meta3">

这不会对您的页面样式产生负面影响，除非元数据和现有 CSS 类之间存在冲突。

Answer 5

作为提到的其他方法的替代方法，如果您愿意排除 IE6（大约是那个时候），您可以使用 DOM 存储（即globalStorage、sessionStorage 和 localStorage 对象）来存储你的 JSON 字符串。这些对象是键值存储，因此如果您的目标浏览器支持此功能（HTML5 规范的一部分），那么这可能比在任意 HTML 元素中存储数据更容易。请参阅here 了解更多信息。