如何为某些HTML标记存储任意数据
我正在制作一个由JavaScript提供一些交互的页面。 举一个例子：发送AJAX请求来获取文章内容然后在div中显示该数据的链接。 显然在这个例子中，我需要每个链接来存储额外的信息：文章的ID。 我一直在处理它的方式是将这些信息放入href链接中：
<a class="article" href="#5">
然后我使用jQuery来查找a.article元素并附加适当的事件处理程序。 （不要太在意这里的可用性或语义，这只是一个例子）
无论如何，这种方法是有效的，但它有点味道，而且根本不可扩展（如果click函数有多个参数，会发生什么？如果其中一些参数是可选的，会发生什么？）
显而易见的答案是在元素上使用属性。 我的意思是，这就是他们的目的，对吧？ （有点）。
<a articleid="5" href="link/for/non-js-users.html">
在我最近的问题中，我询问这种方法是否有效，结果表明我没有定义我自己的DTD（我没有），那么不，它不是有效的或可靠的。 一个常见的反应是将数据放入class属性中（尽管这可能是因为我选择不好的例子），但对我而言，这更味道。 是的，这在技术上是有效的，但它不是一个好的解决方案。
过去我使用的另一种方法是实际生成一些JS，并将其插入到<script>标记的页面中，从而创建一个与该对象关联的结构。
var myData = {
link0 : {
articleId : 5,
target : '#showMessage'
// etc...
},
link1 : {
articleId : 13
}
};
<a href="..." id="link0">
但这可能是一个真正的屁股维护的痛苦，通常只是非常混乱。
因此，为了解决这个问题， 您如何为HTML标签存储任意信息片段 ？
您使用的是哪个版本的HTML？
在HTML 5中，以数据为前缀的自定义属性是完全有效的，例如
<div data-internalid="1337"></div>
在XHTML中，这不是真的有效。 如果您处于XHTML 1.1模式，浏览器可能会抱怨，但在1.0模式下，大多数浏览器会默默地忽略它。
如果我是你，我会遵循基于脚本的方法。 你可以在服务器端自动生成它，以便它不会在后面维护。
如果您已经使用jQuery，那么您应该利用“数据”方法，这是推荐的方法，用jQuery将任意数据存储在dom元素上。
存储的东西：
$('#myElId').data('nameYourData', { foo: 'bar' });
检索数据：
var myData = $('#myElId').data('nameYourData');
这就是它的全部内容，但请查看jQuery文档以获取更多信息/示例。
另一种方式，我个人不会使用它，但它的工作原理（确保你的JSON是有效的，因为eval（）是危险的）。
<a class="article" href="link/for/non-js-users.html">
<span style="display: none;">{"id": 1, "title":"Something"}</span>
Text of Link
</a>
// javascript
var article = document.getElementsByClassName("article")[0];
var data = eval(article.childNodes[0].innerHTML);