最近一直在困扰我的是使用HTML5 data attributes以及何时适合使用它们。隐藏输入与HTML5数据属性
通常，在对我的服务器执行多次AJAX调用的页面上，我需要代表正在查看的页面的ID。我目前一直在存储这个页面上的隐藏的<input>元素，然后访问它并存储在我的jQuery doc ready调用顶部的JS变量中。
我一直在考虑将它移动到body元素上的data-id属性，然后我可以使用$('body').data('id');在jQuery中访问它。
使用HTML5数据atttributes或反之亦然有什么好处？性能？安全？ “最佳实践”？
我的理解是数据属性可以被所有的浏览器访问，所以处理IE不是问题。
因为数据属性是新的，所以我不认为他们什么时候合适或最佳实践是否有真正的共识。我个人的感觉是，当你将数据附加到页面中的DOM元素时，它们会很有意义，因为它们逻辑上与这些DOM元素一起。当你在使用body标签时，我想知道为什么你不把这些值保存在常规的javascript变量中。我怀疑你会有更好的表现使用常规的JavaScript变量。所有这些变量都可以很容易地在Firebug中查看等等，所以它在这个意义上或多或少是安全的。
关于初始页面状态，听起来好像你可能直接将javascript变量放入页面中，而不是按照使用方式放入隐藏字段中。如果您将表单发布到服务器上，那么隐藏元素可能会很有用，这是隐藏元素的设计目的。
这是一个很好的开放性问题，关于什么是最佳实践。
如果从服务器发送正文中的data- *属性值，该怎么办？你不能先知道他们使他们的JavaScript变量。 – sports 2013-04-16 14:12:20
鉴于这个答案是2岁，我认为在如何使用这些答案方面存在更多共识，是的，我认为在body标签或其他任何地方有数据属性都很好。 – 2013-04-16 19:21:35
Id已经在URL中。可靠地将它从URL中取出是我努力做的事情。这是因为我目前的路线设置。他们目前是{controller}/{id}/{action}。我正在努力解决这个问题，但这是另一个问题。 – 2011-04-06 01:40:03
我已经使用JavaScript和PHP来提取ID的一个好的正则表达式有时可以帮助 – mcgrailm 2011-04-06 01:41:45
我从来没有想过要使用正则表达式。感谢您的想法！ – 2011-04-06 01:54:32
这里的我的看法：
input s的意味着形式用作将数据传回服务器，而不使其可见，或可编辑的一种方式，在PAG即data-属性旨在将关于元素的信息传递给页面上的JavaScript。此基础上，该html或body元素上data-属性似乎最合适的。
另一种替代方法虽然语义较少，但可以将页面元数据序列化为JSON，并使用script标记将其设置为页面上的全局变量。例如，您可以在GitHub repositories上看到此操作，其中在页面顶部附近创建了一个全局对象GitHub，并添加了一些信息（回购名称，当前分支，最新提交）以便于访问。
其中一个主要缺点是可访问性。
由于这些属性未在POST中提交给服务器，因此您需要记住JavaScript禁用的浏览器会发生什么情况。如果您的页面也应该能够正常降级并在必要时通过传统表单提交执行相同的AJAX请求的功能，则仍然需要隐藏字段。
这就是说，当他们有意义时，我是数据属性的忠实粉丝，特别是在严格的“应用程序”类型网站，你可以安全地命令JavaScript。例如，标记具有data-id属性的表格行比在其单元中填充隐藏字段更好。尤其是与jQuery对.data()方法的良好数据属性支持相结合，这使得在隐藏字段可能有点混乱的情况下，提供干净，直观的代码。
简而言之数据属性可被附连到由 属性所描述的元件，其中区域中的隐藏的输入不能是另一个DOM元素 内部和它的使用仅限于形式（在良好做法反正） 。 隐藏的输入是一个实际的DOM元素，而数据属性很好......属性，所以它可以绑定到DOM元素。这在大多数情况下，但如果你需要 更多的信息，也许一个例子继续阅读，我警告你它有点长，英语不是我的母语。
基本上，数据属性的创建是为了向DOM元素添加额外的信息，这些额外的信息无法用现有的属性（例如类或好的旧ID）附加到它。
这主要影响基于Web的应用程序，或者更具体地说，Saas'对数据驱动的属性的需求比普通网站（即使CMS背后有CMS）要广泛得多。
我很多年前，当你只有两个选择用来白日梦这个属性使用在他们的令牌的HTML属性，将它们与 客户端或服务器端函数解码（分裂，剪接，爆炸）
这种方法的问题是在于n无论你如何看待它，你都不是 使用他们的方式，他们的意思和设计使用的HTML属性。
Html是一种标记语言，因此它不会自然拥有数据驱动属性 ，您无法使用它来操纵数据处理和行为。
，我有那么基本的情况是，我想有一个 jQuery的对话框加载所有的数据输入表单（客户，产品，供应商等） 各自与不同的宽度和高度。这样，客户端脚本 会小得多，我需要为每个添加到客户端请求的应用程序中的新表单添加一个新对话框 。
这是我用来做什么的数据属性出现之前：
点击添加新的产品
在ID令牌中我有3个值：
其他的方法是使用href属性，但是这是远远超过使用id 只是因为href属性是为了指向一个DOM元素或其他来源，没有任何数据保持于雪上加霜被处理。
两种方法都涉及使用拆分或类似功能来分解令牌。
这我怎么做现在的真棒数据属性：
点击添加新的产品
这样，我并不需要一个道理，我就可以得到每个属性的值 与（'data-form'），$（this）.attr（'data-dwith'）;等等。
恕我直言，我认为向html元素添加一点额外的数据比创建 更长的JavaScript文件更重，更复杂。
我知道这个帖子一直很活跃已经有一段时间了，但是最近我遇到了这个话题，我想评论两者的性能方面。
正如其他人指出的那样，数据属性用于将数据存储在DOM本身，并且在HTML5之前有不同的方式通过使用嵌套在DOM中的隐藏输入或通过使用其他属性来解决该需求。
由于隐藏的输入是具有许多其他属性（占用更多内存）的DOM对象，因此隐藏的输入会更加性能密集（尤其是当您扩展它们时）。
与隐藏输入相比，使用其他属性的内存效率更高，但可能需要更多处理。您可能需要为它们加上前缀并使用这些前缀提取数据。另外，设置它们并获取它们也可能会非常棘手，并且可能会混淆某些元素的默认功能。
所以这里是我为自己设定的指导方针，当涉及到在隐藏的输入和数据属性之间进行选择时。
对于这种情况，你为什么不写数据或大量数据时，请选择隐藏的输入该ID作为常规ID属性？ – elwyn 2011-04-06 02:19:42
@elwyn：我不知道。我从来没有真正想过。 – 2011-04-06 05:45:01