我有一本書的列表，並且我想按照每本書存儲數據，例如價格，數量，編號，catergory id，大小，重量等將數據存儲在DOM中
我正在尋找在dom中存儲所有這些，通過使用數據屬性擴展表示列表中每本書的li元素。這些數據可以直接用於JavaScript。
但是我已經讀過，訪問數據屬性在性能意義上很慢。另外，我可以有同一本書的多個實例，所以我有點關注HTML中的膨脹。
另一種方法是使用JS對象來存儲每本書的數據。
所以我的問題是什麼是在前端，DOM或Javscript中存儲數據的最佳做法？
預先感謝
存儲，在DOM元件和保持數據作爲JavaScript對象是，在第一種情況下你有直接關係的數據和DOM元件，而在第二種情況下則需要之間的差以某種方式保持類似的數據和結構以保持與DOM有關的數據。第二種情況聽起來更容易出錯，因爲您必須確保DOM中的每個更改都反映在數據中（添加/刪除/修改元素），並且數據中的每個更改都反映在DOM（添加/刪除/修改數據成員）。
對於data-*屬性數據直接從DOM進行訪問，所以兩者已經連接在一起，至少在我看來，這是一個更好的做法。但是，如評論中所述，存在DOM檢索開銷，它具有data-*屬性。
在性能這兩個術語所需要的數據被存儲在存儲器中，無論是作爲DOM元素的屬性或作爲JavaScript對象。檢索DOM元素屬性實際上更昂貴，但更方便。渲染不受data-*屬性的影響，因爲它們沒有任何功能意義。
-1。 'data- *'屬性絕對會招致巨大的性能開銷。 Web開發規則之一：** DOM操作速度慢**使用DOM存儲和訪問數據[最多可達** 30倍**慢]（http://calendar.perfplanet.com/2012/efficient -html5-data-attributes /）比在原生JS對象中存儲數據。 – josh3736
@ josh3736我的回答與getAttribute/setAttribute或jQuery attr更相關，而不是HTML5數據集檢索。是的，它是由您的示例提供的更慢，但不像數據集那樣糟糕。 –
'getAttribute'是性能圖上的黃色條，它至少比原生選項慢一個數量級。另外，我鏈接的性能測試完全錯過了DOM元素檢索的成本，這也是非常昂貴的。 – josh3736
data-屬性通常更多地用作將數據導入JavaScript（即從服務器端模板）獲取數據的方式，而不是用於存儲數據的運行時地點。一個更好的地方可以將活動數據保存在JavaScript對象中，特別是在腳本生命週期中您將訪問它或頻繁操作它。
這更符合MVC方法，其中數據存在於您的模型中，但可能會在您的視圖中表示。出於這個原因，像AngularJS這樣的一些新的MVC框架提供了兩者之間的自動雙向綁定。
雖然我會承認，但當腳本很小（<40行）時，我並不總是遵循我自己的建議，並且模型和視圖的分離過大。 – keithjgrant
選擇實際上取決於您的應用程序體系結構和應用程序中的功能類型。如果你正在構建一個單一頁面的應用程序，我發現使用一個良好構造的json對象與一個好的模板插件結合在一起可以爲你提供更多的功能靈活性。
我發現你的數據在你的json中編入一個id，然後將該id存儲在「data-」元素中，可以讓你以瀏覽器事件（點擊等）作出反應，而無需通過JSON結構進行搜索。擁有JSON結構還可以輕鬆地執行諸如排序列表和其他全局操作之類的操作，而無需從DOM重建數據，您可能需要執行這些操作。當你使用MVC框架或者實現自己的「可觀察」數據結構時，這種方法也更好。
另一方面，如果您正在使用大多數服務器端代碼，並且在頁面中只使用「數據」數據的基本功能（例如點擊或類似的簡單顯示書籍詳細信息），則它使用「data-」屬性來存儲更多細節可能更簡單。
我不會使用數據屬性，除非數據以某種方式與它所連接的DOM節點相關。我會用JS對象來保持數據與演示分離。 – pawel