html - 将数据存储在 HTML 标记中作为自定义属性

Question

将相关信息存储在 HTML 标记中是一种好的做法吗？

$("#my_div").append("<span id='info' boo='foo'/>");
$("#info").attr("boo");

我在 TAL(在 ZPT)中遇到过这种技术(并稍微借鉴了它)，您可以在其中使用 tal:attributes修改 HTML 标签的语句(例如，从后端传递 boo 变量的值以在最终文档中呈现为属性值):

<span id='info' tal:attributes='boo view/boo'>

结果:

<span id='info' boo='foo'>

这种技术有一天会破坏文档，还是说它是安全的？

Answer 1

正确的做法是使用 data-* 属性:

http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#embedding-custom-non-visible-data-with-the-data-attributes

切线地，jQuery 也有一个特殊的方法来处理这些。例如:

<p id='string' data-user_name='thedude'></p>
$('#string').data('user_name') => "thedude"
typeof $('#string').data('name') => "string"

<p id='number' data-user_id='12345'</p>
typeof $('#number').data('user_id') => "number"

<p id='boolean' data-user_is_active='true'></p>
typeof $('#boolean').data('user_is_active') => "boolean"

<p id = 'json' data-user='{"name": "the dude", "id": "12345"}'></p>
typeof $('#json').data('user') => "object"
// embedding JSON is extremely useful in my experience