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

Question

我需要将数据存储在与元素关联的 html 文档中，并且我可以使用 javascript 获取这些数据。我想我想避免元素上的任意属性，因为在阅读了这里的各种帖子后我不相信它们。我不能使用 id 或 class，因为我将它们用于其他用途，我不想弄乱它们(我的项目必须处理各种各样的 html，所以我不能对设计做出任何假设类和 id 结构)。我需要做的另一件事是，无论我做什么，它都需要通过 innerHTML(我需要用数据标记的元素的父元素或祖先元素)来回传输，并且数据完好无损。

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

我很好奇它的后果，以及是否有人能想到它的任何问题。我需要能够将它们放在页面正文中任何元素之前的任何位置。例如，我可能需要将它们与选项元素(选择元素的子元素)相关联，以便排除使用隐藏的 div，因为将其中一个放在选择元素中是非法的。我认为它们不会影响表单行为，因为它们没有名称属性(如果有帮助，我可以避免使用 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 的字典要求每个条目的唯一键非常匹配。