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

本文翻译自：How to store arbitrary data for some HTML tags

I'm making a page which has some interaction provided by javascript. 我正在制作一个由javascript提供一些交互的页面。 Just as an example: links which send an AJAX request to get the content of articles and then display that data in a div. 仅作为示例：发送AJAX请求以获取文章内容然后在div中显示该数据的链接。 Obviously in this example, I need each link to store an extra bit of information: the id of the article. 显然在这个例子中，我需要每个链接来存储额外的信息：文章的ID。 The way I've been handling it in case was to put that information in the href link this: 我一直在处理它的方式是将这些信息放在href链接中：

<a class="article" href="#5">

I then use jQuery to find the a.article elements and attach the appropriate event handler. 然后我使用jQuery来查找a.article元素并附加相应的事件处理程序。 (don't get too hung up on the usability or semantics here, it's just an example) （不要太在意这里的可用性或语义，这只是一个例子）

Anyway, this method works, but it smells a bit, and isn't extensible at all (what happens if the click function has more than one parameter? what if some of those parameters are optional?) 无论如何，这种方法有效，但它有点味道 ，根本不可扩展（如果click函数有多个参数会发生什么？如果其中一些参数是可选的，会怎样？）

The immediately obvious answer was to use attributes on the element. 显而易见的答案是在元素上使用属性。 I mean, that's what they're for, right? 我的意思是，这就是他们的目的，对吗？ (Kind of). （的种类）。

<a articleid="5" href="link/for/non-js-users.html">

In my recent question I asked if this method was valid, and it turns out that short of defining my own DTD (I don't), then no, it's not valid or reliable. 在我最近的一个问题中，我问这个方法是否有效，结果是没有定义我自己的DTD（我没有），那么不，它是无效的或可靠的。 A common response was to put the data into the class attribute (though that might have been because of my poorly-chosen example), but to me, this smells even more. 一个常见的反应是将数据放入class属性中（虽然这可能是因为我选择不当的例子），但对我来说，这更令人闻到。 Yes it's technically valid, but it's not a great solution. 是的，它在技术上是有效的，但它不是一个很好的解决方案。

Another method I'd used in the past was to actually generate some JS and insert it into the page in a <script> tag, creating a struct which would associate with the object. 我过去使用的另一种方法是实际生成一些JS并将其插入到<script>标记的页面中，创建一个与该对象关联的结构。

var myData = {
    link0 : {
        articleId : 5,
        target : '#showMessage'
        // etc...
    },
    link1 : {
        articleId : 13
    }
};

<a href="..." id="link0">

But this can be a real pain in butt to maintain and is generally just very messy. 但这可能是维持对接的真正痛苦，而且通常只是非常混乱。

So, to get to the question, how do you store arbitrary pieces of information for HTML tags ? 那么，为了解决这个问题， 你如何为HTML标签存储任意信息 ？

---

#1楼

参考：https://stackoom.com/question/1oQY/如何为某些HTML标记存储任意数据

---

#2楼

You could use the data- prefix of your own made attribute of a random element ( <span data-randomname="Data goes here..."></span> ), but this is only valid in HTML5. 您可以使用随机元素的自己的属性的数据前缀（ <span data-randomname="Data goes here..."></span> ），但这仅在HTML5中有效。 Thus browsers may complain about validity. 因此浏览器可能会抱怨有效性。

You could also use a <span style="display: none;">Data goes here...</span> tag. 您还可以使用<span style="display: none;">Data goes here...</span>标记。 But this way you can not use the attribute functions, and if css and js is turned off, this is not really a neat solution either. 但是这种方式你不能使用属性函数，如果关闭css和js，这也不是一个真正的解决方案。

But what I personally prefer is the following: 但我个人更喜欢以下内容：

<input type="hidden" title="Your key..." value="Your value..." />

The input will in all cases be hidden, the attributes are completely valid, and it will not get sent if it is within a <form> tag, since it has not got any name, right? 在所有情况下，输入都将被隐藏，属性完全有效，如果它在<form>标记内，它将不会被发送，因为它没有任何名称，对吧？ Above all, the attributes are really easy to remember and the code looks nice and easy to understand. 最重要的是，这些属性非常容易记住，而且代码看起来很简单易懂。 You could even put an ID-attribute in it, so you can easily access it with JavaScript as well, and access the key-value pair with input.title; input.value 您甚至可以在其中添加ID属性，因此您也可以使用JavaScript轻松访问它，并使用input.title; input.value访问键值对input.title; input.value input.title; input.value . input.title; input.value 。

---

#3楼

As a jQuery user I would use the Metadata plugin . 作为jQuery用户，我会使用Metadata插件 。 The HTML looks clean, it validates, and you can embed anything that can be described using JSON notation. HTML看起来干净，验证，并且您可以嵌入任何可以使用JSON表示法描述的内容。

---

#4楼

I advocate use of the "rel" attribute. 我主张使用“rel”属性。 The XHTML validates, the attribute itself is rarely used, and the data is efficiently retrieved. XHTML验证，很少使用属性本身，并且有效地检索数据。

---

#5楼

Using jquery, 使用jquery，

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

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

---

#6楼

So there should be four choices to do so: 所以应该有四种选择：

1. Put the data in the id attribute. 将数据放在id属性中。
2. Put the data in the arbitrary attribute 将数据放在任意属性中
3. Put the data in class attribute 将数据放在class属性中
4. Put your data in another tag 将您的数据放在另一个标签中

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