我有一个书籍清单，我想针对每本书存储数据，例如价格、数量、id、分类 ID、尺寸、重量等。
我正在考虑通过使用 data- 属性扩展代表列表中每本书的 li 元素来将所有这些存储在 dom 中。然后可以使用 javascript 直接使用这些数据。
但是我读到访问数据属性在性能方面很慢。此外，我可以有同一本书的多个实例，所以我有点担心 html 中的膨胀。
另一种方法是使用 JS 对象来存储每本书的数据。
所以我的问题是在前端、DOM 或 JavaScript 中存储数据的最佳实践是什么？
提前致谢
data-属性通常更多地用作将数据获取到您的 JavaScript（即从您的服务器端模板）中的一种方式，而不是存储数据的运行时位置。保存活动数据的更好地方是 JavaScript 对象，尤其是在脚本生命周期内频繁访问或操作它的情况下。
这更符合 MVC 方法，其中数据存在于您的模型中，但可能在您的视图中表示。出于这个原因，一些较新的 MVC 框架（如 AngularJS）在两者之间提供了自动双向绑定。
选择实际上取决于您的应用程序架构和应用程序中的功能类型。如果您正在构建单页应用程序，我发现使用构造良好的 json 对象和良好的模板插件可以在功能方面提供更大的灵活性。
我发现在 json 中的 id 上索引您的数据，然后将该 id 存储在“data-”元素中，为您提供了一种很好的方式来响应浏览器事件（点击等），而无需搜索 JSON 结构。拥有 JSON 结构还可以更轻松地执行排序列表和其他全局操作等操作，而无需从 DOM 重建数据。当您使用类似 MVC 的框架或实现自己的“可观察”数据结构时，此方法也更好。
另一方面，如果您主要使用服务器端代码，并且页面中只有基本功能利用您的“数据”数据（例如在点击时显示书籍详细信息或类似的简单内容），那么只需使用“data-”属性来存储额外的细节。
DOM将其存储在元素中和将数据保存为JavaScript对象之间的区别在于，在第一种情况下，您拥有数据和DOM元素直接相关，而在第二种情况下，您需要以某种方式保留相似的数据和DOM结构以保持数据相关到DOM. 第二种情况听起来更容易出错，因为您必须确保数据中的每个更改DOM都反映在数据中（添加/删除/修改元素），并且数据中的每个更改都反映在DOM（添加/删除/修改数据成员）。
在data-*属性数据的情况下，直接从 DOM 访问，因此两者已经绑定在一起，至少在我看来，这是一个更好的做法。但是，正如评论中所提到的，data-*属性会带来 DOM 检索开销。
在性能方面，两者都需要将数据存储在内存中，无论是作为DOM元素属性还是作为JavaScript对象。检索DOM元素属性实际上更昂贵，但更方便。渲染不受data-*属性影响，因为它们没有任何功能意义。