什么是 DOM？
DOM（文档对象模型）是一种将 HTML、XML 文档表示为树状结构的编程接口。在网页中，每个 HTML 元素都可以被视为一个节点，并且可以通过 JavaScript 来访问和操作这些节点。
为什么不建议在 DOM 中存储数据？
在前端开发中，有时候我们会尝试将数据存储在 DOM 元素上，比如像下面这样：
<div id="my-element" data-name="John" data-age="30"></div>
然后，我们可以使用 JavaScript 的 getAttribute 或 dataset 方法来获取该元素的属性值。但是，建议避免在 DOM 中存储数据，有以下几个原因：
1. 数据安全性差
将敏感数据存储在 DOM 元素的属性中是不安全的，因为这些数据可以在浏览器中轻松地被检查和修改。这使得黑客可以很容易地篡改数据或者窃取用户的个人信息。
2. 内存泄露
如果你在 DOM 中存储了大量的数据，那么浏览器可能会因为内存不足而崩溃或变得非常缓慢。
3. 对性能的影响
当我们从 DOM 元素中读取数据时，浏览器需要进行多次解析和计算。而且，读取该元素的属性值也需要一定的时间。如果你在一个循环中多次读取这些属性，那么就会对性能产生负面影响。
4. 不利于维护
将数据存储在 DOM 中会使代码变得混乱不堪，因为在查看代码时很难知道哪些元素包含了数据。此外，如果你需要更改数据，你必须找到所有相关的元素并更新它们，这可能会导致代码出现错误并增加维护成本。
如何避免在 DOM 中存储数据？
为了避免在 DOM 中存储数据，我们可以使用 JavaScript 和数据结构（如数组、对象等）来管理数据。例如，在上面的示例中，我们可以使用以下 JavaScript 对象来管理该数据：
const myData = {
name: 'John',
age: 30
};然后，我们可以针对该对象执行各种操作，例如：
console.log(myData.name); // 输出 'John' myData.age = 31; // 更新数据
此外，我们还可以使用诸如 Redux 或 MobX 等状态管理库来管理全局应用程序状态，以便在整个应用程序中共享数据。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----------- --- ----------------
-------
------
---- --------------- ---------------- --------------------
--------
-- ------
----- --------- - --------------------------------------
------------------------------------------------- -- -- ------
-- -----
----- ------ - -
----- -------
---- --
--
------------------------- -- -- ------
---------
-------
-------结论
虽然在 DOM 元素中存储数据可能很方便，但是不建议这样做。相反，我们应该使用 JavaScript 和数据结构来管理数据，以避免潜在的安全问题、内存泄漏、性能问题和维护成本。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29134