Where to store additional data on a specific element on a web page; data or javascript

Question

I have some data that I need to associate with a specific element, such as a single row in a table. This data contains information, such as the current state, and a unique identifier that correlates with the SQL string. When a user interacts with an element, I want to read a unique identifier and with this identifier, issue an AJAX request so that the user can change the state of this element.

After research, it seems that there are two camps on how to embed this information pertaining to a particular element.

1) Using the data attribute in html5. I understand that this will work in modern web browsers, as well as in older browsers that do not support html5. But while this works, it does not comply with the HMTL specification (less than HTML5), and therefore it will not be checked if you run it using HTML syntax checking.

2) Store additional data in javascript array, object, etc. You need additional work with this now to correlate javascript data with the html element.

What are the pros and cons of using these two different approaches to data storage? And what approach would you recommend?

Thanks!

Answer 1

I would not worry about data attributes that do not pass validators. The attribute is in HTML5 because people have long used similar, non-standardized attributes to solve this problem. Go ahead and start writing "HTML5" using those parts of the specification that work, i.e. They do not break in a specific browser and use the HTML5 doctrine. The W3C validator at least already supports doctype.

As for which method to use, I think it really comes down to what you want to parse the information in the JavaScript interpreter: to load the page or when data is needed. I think it depends on how much information you have, which will be most effective. But you won’t be mistaken by adding it to HTML with a data attribute or two.

Personally, I like to add information in HTML with data attributes. In the scenario you are describing, I would use data-state and data-rid (or similar) so that I do not have to parse the information (it looks like you are thinking of putting two bits of information in one data attribute). Thus, your information table is really complete: the data is presented to the user, and the markup contains additional information that the parser may need.

Answer 2

I would definitely go with option (1) and not worry that these attributes are not checked or just validate your document as html5. It's simple. He works.

The "separation of problems" theory, which leads some people to option (2), is pointless for this kind of situation, because if you put data in any JS object, you still need a way to bind it to the actual html elements, therefore only two are not very separate, they are more complicated than they should be on the client side, and the server-side code needed to create it is, in the first place, more complicated.

Answer 3

In option (2), a special correlation is not needed more than in option (1) - less, less. You can put data in a property of the DOM object that corresponds to the element. Why not use the core JavaScript function, which can add properties to an object?

Answer 4

You marked your question with jQuery, so I assume you have it. You can use the .data() method to store arbitrary data and associate it with an element.

 $("tr").first().data('sqlId', 1234); assert($("tr").first().data('sqlId') === 1234);