javascript - Storing data in the DOM - Stack Overflow

admin管理员组

文章数量:1296276

I have a list of books and I want to store data against each book e.g. Price, Quantity, id, catergory id, size, weight etc.

I was looking at storing all this in the dom by extending the li elements representing each book in the list using data- attributes. This data could then be utilised directly with javascript.

However I have read that accessing data- attributes is slow in a performance sense. In addition I can have multiple instances of the same book so am a little concerened about bloat in the html.

An alternative would be to use a JS object to store data for each book.

So my question is what is the best practice for storing data in the frontend, DOM or Javscript?

Thanks in advance

I have a list of books and I want to store data against each book e.g. Price, Quantity, id, catergory id, size, weight etc.

I was looking at storing all this in the dom by extending the li elements representing each book in the list using data- attributes. This data could then be utilised directly with javascript.

However I have read that accessing data- attributes is slow in a performance sense. In addition I can have multiple instances of the same book so am a little concerened about bloat in the html.

An alternative would be to use a JS object to store data for each book.

So my question is what is the best practice for storing data in the frontend, DOM or Javscript?

Thanks in advance

• javascript
• performance
• dom
• custom-data-attribute

Share Improve this question Follow asked Jan 13, 2013 at 21:09 user502014user502014 2,33155 gold badges2424 silver badges3232 bronze badges 1

• 2 I wouldn't use data- attributes unless the data is somehow related to the DOM nodes it's attached to. I'd go with JS object to keep data separate from presentation. – pawel Commented Jan 13, 2013 at 21:14

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

The data- attributes are generally used more as a way to get data into your JavaScript (i.e. From your server-side template), and less a runtime place to store your data. A better place keep your active data is in a JavaScript object, especially if you will be accessing it or manipulating it frequently during the life of your script.

This is more in keeping with an MVC approach, where the data lives in your Model, but may be represented in your View. For this reason, some of the newer MVC frameworks like AngularJS provide automatic two-way binding between the two.

The choice is really dependant on your application architecture and type of functionality in your application. If you are building a single page app I found that using a well constructed json object in conjunction with a good templating plugin gives you much more flexibility in terms of functionality.

I found that indexing your data on an id in your json and then storing that id in the "data-" element gives you a nice way of reacting to browser events (clicks etc) without having to search through JSON structure. Having a JSON structure also makes it a bit easier to do operations such as sorting lists and other global operations that you might want to do without having to rebuild your data from DOM. This method is also better when you work with MVC like frameworks or implement your own "observable" data structures.

On the other hand if you are working with mostly server side code and have only basic functionality in your page that utilizes your "data-" data (such as display book details on click or something simple like that), it is probably simpler to just use the "data-" attribute to store additional details.

The difference between storing that in the DOM elements and keeping data as JavaScript objects is that in the first case you have the data and the DOM element directly related, while in the second case you need to somehow keep similar data and DOM structures in order to keep the data related to the DOM. The second case is, as it sounds, more error prone, because you have to make sure that every change in the DOM is reflected in the data (adding/removing/modifying elements) and every change in the data is reflected in the DOM (adding/removing/modifying data members).

In the case of data-* attributes data is directly accessed from the DOM so the two are already tied together and is, at least in my opinion, a much better practice. However, as mentioned in ments, there is a DOM retrieval overhead which es with data-* attributes.

In terms of performance both require the data to be stored in memory, be it as DOM element attributes or as JavaScript objects. Retrieving a DOM element attribute is actually more expensive but it's more convenient. Rendering is not affected by data-* attributes as they do not have any functional meaning.

本文标签： javascriptStoring data in the DOMStack Overflow