在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));
    });
}

或者，可以在段落中构建表单，并将元数据存储在那里。 但是，这通常感觉有点矫枉过正。

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

• 如何为某些HTML标记存储任意数据
• HTML标记上的非标准属性。 好事？ 坏事？ 你的意见？

Answer 1

HTML5现在支持用于存储没有非标准自定义属性的abitrary数据的data-name语法

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

这是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元素中更容易。 有关详细信息，请参见此处