我知道它不好在DOM中存储数据，但为什么？
我一遍又一遍地听到“将DOM用作数据库是不好的做法”。
虽然我大多同意这种观点，但这个问题更多的是关于黑白案例的少。 记住jQuery的.data()方法和HTML5数据属性规范的最新版本，为了方便起见，将一些数据粘贴到DOM中确实很糟糕。
例如，我最近通过执行如下操作在一个充满输入的表上实现了“实时”计算功能：
<table>
<tr>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
</tr>
</table>
jQuery的：
$('table').bind('calculate',function(){
var total = 0;
$(this).find('tr').each(function(){
total += $(this).data('value');
});
// display total
});
$('table input').bind('change keyup',function(){
$(this).closest('tr').data('value',$(this).val());
$(this).closest('table').trigger('calculate');
});
这是一个过于简化的例子，因为我可以跳过对.data()的调用并直接进入输入值，但让我们设想一个稍微复杂一些的场景，其中输入以外的元素会影响行值。
在这种情况下使用DOM存储简单数据是错误的吗？
将数据存储在DOM对象中很好。 因为你的问题是特定于jQuery的数据API的，所以理解data API的工作方式很重要。 我写了一个答案，解释了它的内部工作。 数据API仅保留对DOM对象的引用以及数据，并且不在DOM对象本身中存储任何内容。 所有数据都存储在普通的旧JavaScript对象中。
这是一个好还是坏的问题是个人品味的问题。 jQuery的创建者John Resig在2010年Tech4Africa上发表了一篇演讲，谈到了这个问题，并建议废除单独的存储区域，并使用数据API将所有内容与DOM链接起来。 您可以在YouTube上看到演讲（感谢@ tine2k提供的链接）。 如果你听整个演讲，你会发现一些很好的例子，说明为什么这种方法有意义并且保持简单。
我相信类似的观点可以用于另一方面 - 让你的数据整齐地隐藏在对象和类中，并与视图本身分开。 这种想法来自传统架构，如MVC。
我认为可以采用任何一种方法 - 使用DOM来存储数据或使用经典方法。 只是不要混淆两者，因为那时你的应用程序模型就会随处洒落。
有一些基本观点反对使用DOM来存储数据：
DOM应该是数据视图。 DOM元素的属性应该是元素本身的元数据，而不是来自模型的数据。
您不应该将随机属性添加到主机对象，因为您不知道它们可能对它们做什么。
你有和全局变量一样的问题 - 如果它变得很常见，你将不得不采用一种方案来避免名称冲突。
还有一种观点认为，DOM是一个非常普通的数据存储，而且具有索引的对象结构对于除平凡数据需求以外的其他任何东西都更加高效。
如果您只有少量数据，并且可以完全控制页面，那么继续将数据放入数据属性和属性中。 但不要储存大块或复杂的结构。
哦，我不认为有任何性能问题 - 访问DOM中的元素及其属性可能不会比访问对象结构的某个部分更快或更慢，但我确信有更快更慢的方式同时做两个。
我不认为将数据存储在DOM中有什么问题，但我认为问题在于将大量数据存储在DOM中。 浏览器不得不混淆DOM才能输出我们看到的页面，而更多的数据在那里需要处理更多的垃圾。
我相信也有其他原因，这只是我的推论。
链接地址: http://www.djcxy.com/p/35353.html