使用页面中的隐藏元素来存储数据

Question

我需要将数据存储在与元素相关联的html文档中，并且我可以使用javascript。我想我想避免元素上的任意属性，因为在阅读各篇文章之后我不相信它们。我不能使用id或class，因为我将它们用于其他事情并且我不想弄乱它们（我的项目必须处理各种各样的html因此我不能对设计做出任何假设类和id结构）。我需要的另一件事就是无论我做什么，它都需要通过innerHTML（我需要用数据标记的元素的父元素或祖先元素）进行四舍五入，数据保持不变。

我已经考虑了各种隐藏元素（包括脚本标记和html注释），我在需要用数据标记的元素之前插入到文档中。目前我最喜欢的是隐藏的表单元素（即输入类型为“hidden”）。我可以将我想要的任何数据粘贴到元素的“值”中，并且我可以使用getElementsByTagName（）轻松找到所有这些元素。同样重要的是，它似乎不会影响页面的布局。

我很好奇这个的后果，如果有人能想到它的任何问题。我需要能够在任何元素之前将它们放在页面正文中的任何位置。例如，我可能需要将它们与选项元素（选择元素的子元素）相关联，因此使用隐藏的div排除规则，因为将其中一个放入select元素中是非法的。我不认为它们会影响表单行为，因为它们没有name属性（如果有帮助，我可以避免使用id）。

对此有任何想法，或者是否有其他方法可以满足我的需求？

Answer 1

如果这是用于JavaScript目的的数据，为什么甚至尝试将它放在HTML中呢？这是我的意思的一个简单例子

<script type="text/javascript">

var nodeData = {
    foo: {/* Data to associate with div#foo */}
  , bar: {/* Data to associate with div#bar */}
};

</script>


<div id="foo">Foo!</div>
<div id="bar">Bar!</div>

它简单而优雅，因为每个文档的ID唯一原则与每个条目需要唯一键的javascript词典很好地匹配。