我正在做一个有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标记存储任意信息?
一个几乎适用于所有可能的浏览器的黑客是使用这样的开放类:< A class='data\_articleid\_5' href="link/for/non-js-users.html>;
对于纯粹主义者来说，这并不是那么优雅，但它得到了普遍支持，符合标准，并且非常容易操作。这似乎是最好的方法了。如果你序列化，修改，复制你的标签，或者做其他任何事情，数据将保持附加，复制等。
唯一的问题是您不能以这种方式存储不可序列化的对象，如果您在那里放置非常大的对象，可能会有限制。
第二种方法是使用伪属性，例如:< A articleid='5' href="link/for/non-js-users.html">
这更优雅，但不符合标准，而且我不能100%确定是否支持。许多浏览器完全支持它，我认为IE6支持JS访问，但不支持CSS选择器(在这里这并不重要)，可能有些浏览器会完全混淆，你需要检查一下。
做一些有趣的事情，比如序列化和反序列化，会更加危险。
使用id到纯JS散列通常是可行的，除非你试图复制你的标记。如果你有tag <a href="…" id="link0">，通过标准的JS方法复制它，然后尝试修改附加到一个副本的数据，另一个副本也会被修改。
如果不复制标记或使用只读数据，这不是问题。如果你复制标签，它们被修改了，你需要手动处理。
我发现元数据插件可以很好地解决使用html标记存储任意数据的问题，并且可以很容易地检索和使用jQuery。
重要提示:您包含的实际文件只有5 kb，而不是37 kb(这是完整下载包的大小)
下面是一个例子，它被用来存储值时，我使用生成谷歌分析跟踪事件(注:数据。标签和数据。值碰巧是可选参数)
$(function () {
$.each($(".ga-event"), function (index, value) {
$(value).click(function () {
var data = $(value).metadata();
if (data.label && data.value) {
_gaq.push(['_trackEvent', data.category, data.action, data.label, data.value]);
} else if (data.label) {
_gaq.push(['_trackEvent', data.category, data.action, data.label]);
} else {
_gaq.push(['_trackEvent', data.category, data.action]);
}
});
});
});
<input class="ga-event {category:'button', action:'click', label:'test', value:99}" type="button" value="Test"/>
