如何为某些 HTML 标签存储任意数据
我正在制作一个页面，其中包含一些由 javascript 提供的交互。举个例子：发送 AJAX 请求以获取文章内容然后在 div 中显示该数据的链接。显然，在这个例子中，我需要每个链接存储一个额外的信息：文章的 id。我一直在处理它的方式是将这些信息放在 href 链接中：
<a class="article" href="#5">
然后我使用 jQuery 查找 a.article 元素并附加适当的事件处理程序。 （不要太在意这里的可用性或语义，这只是一个例子）
无论如何，这个方法有效，但它smells有点，而且根本不可扩展（如果点击函数有多个参数会发生什么？如果其中一些参数是可选的呢？）
显而易见的答案是在元素上使用属性。我的意思是，这就是他们的目的，对吧？ （有点儿）。
<a articleid="5" href="link/for/non-js-users.html">
在 my recent question 中，我询问此方法是否有效，结果证明没有定义我自己的 DTD（我没有），然后不，它无效或不可靠。一个常见的反应是将数据放入 class 属性中（尽管这可能是因为我的示例选择不当），但对我来说，这更难闻。是的，它在技术上是有效的，但它不是一个很好的解决方案。
我过去使用的另一种方法是实际生成一些 JS 并将其插入到页面中的 <script> 标记中，创建一个与对象关联的结构。
var myData = {
link0 : {
articleId : 5,
target : '#showMessage'
// etc...
},
link1 : {
articleId : 13
}
};
<a href="..." id="link0">
但这可能是一个真正难以维护的痛苦，而且通常非常混乱。
那么，为了解决这个问题，您如何存储 HTML 标签的任意信息？
您使用的是哪个版本的 HTML？
在 HTML 5 中，拥有 custom attributes prefixed with data- 是完全有效的，例如
<div data-internalid="1337"></div>
在 XHTML 中，这并不是真正有效的。如果您在 XHTML 1.1 模式下，浏览器可能会抱怨它，但在 1.0 模式下，大多数浏览器会默默地忽略它。
如果我是你，我会遵循基于脚本的方法。你可以让它在服务器端自动生成，这样维护起来就不会很麻烦。
如果您已经在使用 jQuery，那么您应该利用“data”方法，这是使用 jQuery 在 dom 元素上存储任意数据的推荐方法。
存储一些东西：
$('#myElId').data('nameYourData', { foo: 'bar' });
要检索数据：
var myData = $('#myElId').data('nameYourData');
这就是它的全部内容，但请查看 jQuery documentation 以获取更多信息/示例。
换一种方式，我个人不会使用它，但它可以工作（确保你的 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);
任意属性无效，但在现代浏览器中完全可靠。如果您通过 javascript 设置属性，那么您也不必担心验证。
另一种方法是在 javascript 中设置属性。 jQuery 有一个 nice utility method 用于此目的，或者您可以自己滚动。
data- 属性？
几乎所有可能的浏览器都可以使用的一个技巧是使用这样的开放类：<a class='data\_articleid\_5' href="link/for/non-js-users.html>;
这对纯粹主义者来说并不是那么优雅，但它得到了普遍支持、符合标准并且非常容易操作。这似乎是最好的方法。如果您serialize、修改、复制您的标签，或执行任何其他操作，data 将保持连接、复制等。
唯一的问题是你不能以这种方式存储不可序列化的对象，如果你在那里放一些非常大的东西可能会有限制。
第二种方法是使用 fake attributes，例如：<a articleid='5' href="link/for/non-js-users.html">
这更优雅，但违反了标准，我不能 100% 确定是否支持。许多浏览器完全支持它，我认为IE6支持JS访问但不支持CSS selectors（这并不重要），也许有些浏览器会完全混淆，你需要检查一下。
做一些有趣的事情，比如序列化和反序列化会更加危险。
使用 ids 到纯 JS 散列主要是有效的，除非您尝试复制标签。如果您有 tag <a href="..." id="link0">，请通过标准 JS 方法复制它，然后尝试修改仅附加到一个副本的 data，另一个副本将被修改。
如果您不复制 tag 或使用 只读 数据，这不是问题。如果您复制 tag 并对其进行了修改，则需要手动处理。
使用jQuery，
存储：$('#element_id').data('extra_tag', 'extra_info');
检索：$('#element_id').data('extra_tag');
我知道您当前正在使用 jQuery，但是如果您内联定义了 onclick 处理程序会怎样。然后你可以这样做：
<a href='/link/for/non-js-users.htm' onclick='loadContent(5);return false;'>
Article 5</a>
您可以使用隐藏的输入标签。我在 w3.org 上没有收到任何验证错误：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta content="text/html;charset=UTF-8" http-equiv="content-type" />
<title>Hello</title>
</head>
<body>
<div>
<a class="article" href="link/for/non-js-users.html">
<input style="display: none" name="articleid" type="hidden" value="5" />
</a>
</div>
</body>
</html>
使用 jQuery，您将获得类似（未测试）的文章 ID：
$('.article input[name=articleid]').val();
但如果可以的话，我会推荐 HTML5。
style="display: none"。
为什么不利用已经存在的有意义的数据，而不是添加任意数据？
即使用 <a href="/articles/5/page-title" class="article-link">，然后您可以通过编程方式获取页面上的所有文章链接（通过类名）和文章 ID（匹配正则表达式 /articles\/(\d+)/ 与 this.href）。
这是个好建议。感谢@Prestaul
如果您已经在使用 jQuery，那么您应该利用“data”方法，这是使用 jQuery 在 dom 元素上存储任意数据的推荐方法。
非常正确，但是如果您想在普通 HTML 中存储任意数据怎么办？这是另一种选择...
<input type="hidden" name="whatever" value="foobar"/>
将您的数据放在隐藏输入元素的名称和值属性中。如果服务器正在生成 HTML（即 PHP 脚本或其他），并且您的 JavaScript 代码稍后将使用此信息，这可能很有用。
诚然，这不是最干净的，但它是一种替代方案。它与所有浏览器兼容并且是有效的 XHTML。您不应该使用自定义属性，也不应该真正使用带有“data-”前缀的属性，因为它可能不适用于所有浏览器。此外，您的文档不会通过 W3C 验证。
我提倡使用“rel”属性。 XHTML 验证，属性本身很少使用，并且有效地检索数据。
所以应该有四种选择：
将数据放入 id 属性中。将数据放在任意属性中 将数据放在类属性中 将数据放在另一个标签中
http://www.shanison.com/?p=321
您可以使用自己制作的随机元素 (<span data-randomname="Data goes here..."></span>) 属性的 data- 前缀，但这仅在 HTML5 中有效。因此浏览器可能会抱怨有效性。
您也可以使用 <span style="display: none;">Data goes here...</span> 标记。但是这样你就不能使用属性函数了，如果关闭了css和js，这也不是一个很好的解决方案。
但我个人更喜欢的是以下几点：
<input type="hidden" title="Your key..." value="Your value..." />
输入在所有情况下都将被隐藏，属性完全有效，如果它在 <form> 标记内，它不会被发送，因为它没有任何名称，对吧？最重要的是，属性真的很容易记住，代码看起来很漂亮，也很容易理解。您甚至可以在其中添加一个 ID 属性，这样您也可以使用 JavaScript 轻松访问它，并使用 input.title; input.value 访问键值对。
只要您的实际工作是在服务器端完成的，为什么还需要输出中的 html 标记中的自定义信息呢？您需要在服务器上知道的所有内容都是包含您的自定义信息的任何类型结构列表的索引。我认为您希望将信息存储在错误的位置。
无论多么不幸，我都会认识到，在很多情况下，正确的解决方案并不是正确的解决方案。在这种情况下，我强烈建议生成一些 javascript 来保存额外信息。
许多年后：
这个问题是在 data-... 属性随着 html 5 的出现而成为有效选项之前大约三年发布的，所以事实已经发生了变化，我给出的原始答案不再相关。现在我建议改用 data attributes。
<a data-articleId="5" href="link/for/non-js-users.html">
<script>
let anchors = document.getElementsByTagName('a');
for (let anchor of anchors) {
let articleId = anchor.dataset.articleId;
}
</script>
一种可能是：
创建一个新的 div 来保存所有扩展/任意数据
做一些事情来确保这个 div 是不可见的（例如 CSS 加上 div 的一个类属性）
将扩展/任意数据放在 [X]HTML 标记中（例如，作为表格单元格中的文本，或您可能喜欢的任何其他内容）在这个不可见的 div 中
另一种方法是使用以下语法将 key:value 对存储为一个简单的类：
<div id="my_div" class="foo:'bar'">...</div>
这是有效的，可以使用 jQuery 选择器或自定义函数轻松检索。
在 html 中，我们可以在属性名称之前使用前缀“data-”来存储自定义属性，例如
<p data-animal='dog'>This animal is a dog.</p>。检查documentation
我们可以使用这个属性来使用 jQuery 动态设置和获取属性，例如：如果我们有 ap 标签，例如
<p id='animal'>This animal is a dog.</p>
然后为上面的标签创建一个名为'breed'的属性，我们可以这样写：
$('#animal').attr('data-breed', 'pug');
要随时检索数据，我们可以编写：
var breedtype = $('#animal').data('breed');
在我以前的雇主，我们一直使用自定义 HTML 标签来保存有关表单元素的信息。问题：我们知道用户被迫使用 IE。
当时它对 FireFox 并不适用。我不知道 FireFox 是否改变了这一点，但请注意，您的读者的浏览器可能支持也可能不支持将您自己的属性添加到 HTML 元素。
如果您可以控制您的阅读器使用的浏览器（即公司的内部网络小程序），那么请务必尝试一下。它会伤害什么，对吧？
这就是我如何处理 ajax 页面......这是一个非常简单的方法......
function ajax_urls() {
var objApps= ['ads','user'];
$("a.ajx").each(function(){
var url = $(this).attr('href');
for ( var i=0;i< objApps.length;i++ ) {
if (url.indexOf("/"+objApps[i]+"/")>-1) {
$(this).attr("href",url.replace("/"+objApps[i]+"/","/"+objApps[i]+"/#p="));
}
}
});
}
它的工作原理是它基本上查看所有具有类 'ajx' 的 URL，它替换了一个关键字并添加了 # 符号......所以如果 js 被关闭，那么这些 URL 将像往常一样运行......所有“应用程序”（网站的每个部分）都有自己的关键字......所以我需要做的就是添加到上面的 js 数组以添加更多页面......
因此，例如，我当前的设置设置为：
var objApps= ['ads','user'];
因此，如果我有一个网址，例如：
www.domain.com/ads/3923/bla/dada/bla
js 脚本将替换 /ads/ 部分，因此我的 URL 最终将成为
www.domain.com/ads/#p=3923/bla/dada/bla
然后我使用 jquery bbq 插件相应地加载页面......
http://benalman.com/projects/jquery-bbq-plugin/
我发现元数据插件可以很好地解决使用 html 标签存储任意数据的问题，这种方法可以轻松检索和使用 jQuery。
重要提示：您包含的实际文件只有 5 kb 而不是 37 kb（这是完整下载包的大小）
这是一个用于存储我在生成谷歌分析跟踪事件时使用的值的示例（注意：data.label 和 data.value 恰好是可选参数）
$(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"/>
$(this).data('internalid');而不是：$(this).data('data-internalid');