"Null" HTML DOM 元素？

Question

我正在编写一个框架，它使用 javascript/html 作为客户端，它不重要作为后端。

有时我需要在 HTML DOM 中存储数据。理想情况下，我想针对 DOM 元素存储数据，但我希望该元素没有 UI 影响。

目前我在想我会使用一个没有文本内容的并用属性装饰它，这样我的框架就可以识别它是一个数据容器并表现得适当。

还有更好的选择吗？（为避免疑义，我知道还有其他方法可以做事 - 我对这些不感兴趣，纯粹是最好的 HTML 元素用于包含数据而没有 UI影响）。

编辑（架构说明）：我创建了一种服务器端技术，该技术基于我之前创建的通用报告引擎。这个服务器端的东西本质上是一个网络服务器——这似乎是一个不寻常的选择，但考虑到组织限制，它是最好的选择——为了争论，假设这是真的。我需要这个系统做的一件事是生成动态表单来捕获树状形式的数据。这一直很好并且运作良好 - 我的问题是因为当子表单被隐藏时（例如，用户已经在数据的给定子部分中做出所有必需的决定），我销毁数据捕获元素 - 如果该表单嵌入在父表单中，该父表单需要访问在已销毁的子表单中捕获的数据，我需要一种将数据嵌入 DOM 的方法，以便可以收集数据以将其传回服务器。要求比这个复杂得多，但要详细说明它们将花费太长时间。

Answer 1

嗯（为了避免疑义），HTML 元素不应该存储数据。如果您真的想要，请使用 <input type="hidden"> 元素。

出于您的目的，我建议（按此顺序）使用本地存储或 cookie 或网络数据库。

这里有一些资源：

本地存储：http://diveintohtml5.info/storage.html
cookie : http://www.the-art-of-web.com/javascript/setcookie/
网络数据库：http://www.tutorialspoint.com/html5/html5_web_sql.htm

正如 JLRishe 指出的那样，如果您出于某种原因需要文本节点存储，那么 span 是一个不错的选择，因为 div 是（并且很多元素只要您 display: none他们）。

Answer 2

您可以创建 javascript 个对象...

var myData ={
    property1:"aaaaa",
    property2:500,
    property3:{morestuff1:"AAA", ... },
    property3:["list1", "list2", ... ],
   ....
}

如果需要，可以在 DOM 中轻松访问和操作。无 UI 影响....（无渲染）

Answer 3

这里显而易见的选择是使用 HTML 数据属性。如果您有 table 并且想要存储未向用户显示的有关 table 的信息 - 您可以：

<table id="mytable" data-id="2000" data-rows="20" data-whatever="whatever">

然后您可以通过 jQuery 轻松获得它：

$("#mytable").data('rows');

哪个会给你 20。

Answer 4

在 DOM 中存储数据不是好的做法，如果您实际上没有将其用于布局目的。哎呀！

为了更好地满足您的需求，HTML5 提供了 JavaScript API 来处理客户端存储。根据您的情况，您有 2 个选项可供选择。 API完全一样，唯一的区别是存储的生命周期。

他们是：

localStorage：本地存储持久化；在用户完全关闭浏览器并重新打开后，存储在本地存储中的数据甚至可用于网页。
sessionStorage：顾名思义，此数据仅适用于当前会话。

这里有一个 link 可以帮助您更好地理解这些 API，这样您就可以解决您的特定问题：http://www.w3schools.com/html/html5_webstorage.asp

"Null" HTML DOM 元素？

"Null" HTML DOM Element?

javascript

html

dom