如何存储一些HTML标签的任意数据

Question

我正在制作一个由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标记存储任意信息？

Answer 1

你正在使用哪个版本的HTML？

在HTML 5中，完全有效的是拥有custom attributes prefixed with data-，例如

<div data-internalid="1337"></div> 

在XHTML中，这不是真的有效。如果您处于XHTML 1.1模式，浏览器可能会抱怨，但在1.0模式下，大多数浏览器会默默地忽略它。

如果我是你，我会遵循基于脚本的方法。你可以在服务器端自动生成它，以便它不会在后面维护。

Answer 2

我知道你目前正在使用jQuery，但是如果你定义了onclick处理程序内联。那么你可以这样做：

<a href='/link/for/non-js-users.htm' onclick='loadContent(5);return false;'> 
    Article 5</a> 

Answer 3

任意属性无效，但在现代浏览器中完全可靠。如果你通过javascript设置属性，那么你不必担心验证。

另一种方法是在javascript中设置属性。 jQuery有一个nice utility method只是为了这个目的，或者你可以推出自己的。

Answer 4

那将会有几乎每一个可能的浏览器工作黑客是使用公开课是这样的：<a class='data\_articleid\_5' href="link/for/non-js-users.html>;

这是不是所有的优雅的纯粹主义者，但它的普遍支持，符合标准的，也很容易操纵。它真的好像是最好的方法。如果您serialize，修改，复制你的标签，或做几乎任何东西，data将保持连接，复制等

唯一的问题是，你不能存储非序列化对象的方式，如果你在那里放了很大的东西，可能会有限制。

第二种方法是使用假属性像：<a articleid='5' href="link/for/non-js-users.html">

这是更优雅，但断裂的标准，我不是100％地肯定支持。许多浏览器都支持它，我认为IE6支持JS访问，但不支持CSSselectors（这里并不重要），也许一些浏览器会完全混淆，你需要检查它。

做序列化和反序列化等有趣的事情会更危险。

使用ids为纯粹JS散列大多数工作，除非您尝试复制您的标记。如果您有tag<a href="..." id="link0">，请通过标准JS方法复制它，然后尝试修改data附加到只有一个副本，其他副本将被修改。

如果您不复制tag s或使用只读数据，这不是问题。如果您复制tag并且它们已被修改，则需要手动处理。

Answer 5

为什么不使用已有的有意义的数据，而不是添加任意数据？

即使用<a href="/articles/5/page-title" class="article-link">，然后您可以编程方式获取页面上的所有文章链接（通过类名）和文章ID（匹配正则表达式/articles\/(\d+)/对this.href）。

Answer 6

一种可能性是：

• 创建一个新的div来容纳所有的扩展/任意数据
• 做一些事情，以确保这个div是无形的（如CSS加的div class属性）
• 将[X] HTML标签中的扩展/任意数据（例如，作为表的细胞内的文本，或者其他任何你可能会喜欢的）这种无形的div

Answer 7

只是另一种方式中，我的人盟友不会使用这个，但它的作品（确保你的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); 

Answer 8

如果您正在使用jQuery已经那么你应该充分利用“数据”的方法是用于存储与jQuery的DOM元素上的任意数据的推荐方法。

存储某物：

$('#myElId').data('nameYourData', { foo: 'bar' }); 

检索数据：

var myData = $('#myElId').data('nameYourData'); 

这是所有有给它，但看看在jQuery documentation获取更多信息/例子。

Answer 9

只要你真正的工作是在服务器端完成的，为什么你需要输出html标签中的自定义信息呢？所有你需要知道的服务器是一个索引到你的自定义信息的任何类型的结构列表。我想你想把信息存储在错误的地方。

不管怎样，我会认识到，在很多情况下，正确的解决方案并不是正确的解决方案。在这种情况下，我强烈建议生成一些JavaScript来保存额外的信息。

Answer 10

在我以前的雇主中，我们一直使用自定义HTML标签来保存有关表单元素的信息。问题：我们知道用户被迫使用IE。

当时FireFox并不适用。我不知道FireFox是否改变了这一点，但请注意，将自己的属性添加到HTML元素可能会或可能不会被读者的浏览器支持。

如果您可以控制您的阅读器正在使用的浏览器（即公司的内部Web小程序），那么请尝试使用它。有什么可伤害的，对吧？

Answer 11

作为jQuery用户，我会使用Metadata plugin。 HTML看起来很干净，它可以验证，并且可以嵌入任何可以使用JSON表示法描述的内容。

Answer 12

我主张使用“rel”属性。 XHTML验证，属性本身很少使用，并且数据被有效地检索。

Answer 13

所以应该有四种选择这样做：

1. 把数据在id属性。
2. 将数据放入任意属性
3. 把数据的类属性
4. 把你的数据在另一个标签

http://www.shanison.com/?p=321

Answer 14

这是我做的，你怎么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，那么这些网址就会像通常那样运行......所有“应用程序”（网站的每个部分）有它自己的关键字...所以我需要做的就是添加到上面的js数组以添加更多页面...

因此，例如，我目前的设置被设定为：

var objApps= ['ads','user']; 

所以，如果我有一个网址，如：

www.domain.com/ads/3923/bla/dada/bla

JS脚本将取代/广告/一部分，所以我的网址将结束是

www.domain.com/ads/#p=3923/bla/dada/bla

然后使用jQuery插件烧烤加载相应的页面...

http://benalman.com/projects/jquery-bbq-plugin/

Answer 15

我已经找到了元数据的插件是在某种程度上与HTML标签任意数据存储问题的最佳解决方案这使得它很容易检索和使用jQuery。

重要：你包括是实际的文件是仅 kb和不 kb的（这是完整的下载包的大小）

这里是被用于它的一个例子存储值生成谷歌Analytics跟踪事件，当我使用（注：data.label和data.value恰巧是可选PARAMS）

$(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"/> 

Answer 16

这是很好的建议。由于@Prestaul

如果您正在使用jQuery已经那么你应该充分利用“数据” 方法，它是用于存储与jQuery一个 DOM元素上的任意数据的推荐方法。

非常真实，但是如果您想将任意数据存储在普通的HTML中，该怎么办？这是另一种选择...

<input type="hidden" name="whatever" value="foobar"/> 

将您的数据放入隐藏输入元素的名称和值属性中。如果服务器正在生成HTML（例如PHP脚本或其他），这可能很有用，并且您的JavaScript代码稍后将使用此信息。

不可否认，不是最干净的，但它是一种选择。它与所有 浏览器兼容，并且是有效的XHTML。您应该使用自定义属性而不是，也不应该使用'data-'前缀属性，因为它可能不适用于所有浏览器。此外，您的文档不会通过W3C验证。

Answer 17

的另一种方法可以是用于存储密钥：使用以下语法值对作为一个简单的类：

<div id="my_div" class="foo:'bar'">...</div> 

这是有效的，并且可以很容易地与jQuery选择或定制的功能检索。

Answer 18

您可以使用隐藏的输入标签。我在w3没有验证错误。组织本：

<!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，如果这是一个选项。

Answer 19

您可以使用您自己制作的随机元素属性的数据前缀（<span data-randomname="Data goes here..."></span>），但这仅在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访问键值对。

Answer 20

使用jQuery，

存储：$('#element_id').data('extra_tag', 'extra_info');

检索：$('#element_id').data('extra_tag');