如何为某些HTML标签存储任意数据

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

当时对于FireFox来说效果不佳。我不知道FireFox是否已更改此设置，但是请注意，读者的浏览器可能不支持将自己的属性添加到HTML元素。

如果您可以控制读者使用的浏览器（例如，公司的内部Web小程序），则请务必尝试一下。会疼什么，对吗？

一种可能是：

• 创建一个新的div来保存所有扩展/任意数据
• 做一些事情以确保此div不可见（例如CSS加上div的class属性）
• 将扩展的/任意的数据放在该不可见的div内的[X] HTML标记内（例如，作为文本在表格的单元格中，或其他类似的内容）

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

您可以使用您自己的随机元素（<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。

因此，应该有四个选择：

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

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

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

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

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

换一种方式，我个人不会使用它，但是它可以工作（确保您的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 为此提供了一个很好的实用程序方法，或者您可以自己滚动。

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

在HTML 5中，使用以data-开头的自定义属性是完全有效的，例如

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

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

如果我是你，我将遵循基于脚本的方法。您可以使其在服务器端自动生成，因此维护起来不会麻烦。