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

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

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

Answer 1

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

如果你的doctype不是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和{{1存储您的JSON字符串。这些对象是键值存储，因此如果您要定位的浏览器支持此功能（HTML5规范的一部分），那么这可能比将数据存储在任意HTML元素中更容易。有关详细信息，请参阅here。

在HTML中存储任意数据

5 个答案: