Question

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

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

目前我在想我会使用＆lt; span＆gt;没有文本内容，并使用归属进行装饰，以便我的框架可以认为它是一个数据容器并且行为恰当。

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

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

Answer 1

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

出于您的目的，我建议（按此顺序）使用localstorage或cookie或Web数据库。

这里有一些资源：

localstorage：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一样长）。 / p>

Answer 2

你可以创建javascript对象......

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

如果需要，可以轻松访问并轻松操作DOM。没有UI影响......（没有渲染）

Answer 3

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

<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：顾名思义，此数据仅适用于当前会话。

以下链接可帮助您更好地了解这些API，以便您解决特定问题：http://www.w3schools.com/html/html5_webstorage.asp

＆＃34;空＆＃34; HTML DOM元素？

4 个答案: