Storing data inside jQuery's data attribute VS javascript string

Question

My website has different elements called 'widgets'. Each of these widgets consists on an isolated component, which is basically a div and a JSON object for it. The data for each widget returns from PHP in JSON format, I then echo it on a jQuery data attribute for each widget's div, like so:

<div class="widget" id="<?=$widget->id?> data-internal="<?= $widget->json_data?>
    content
</div>

So every time I want to access the widget's content, I can read it from the element itself in jQuery, making it easy to access since I'm already doing something related to the div.

Another option I thought of doing, id to output the data in pure javascript, but then I would have to create an array of objects to access it, kinda like this.

<script>
    $widget_array[<?= $widget->id?>] = <?= $widget->json_data ?>
</script>

So that I would have to get the widget ID and then look for the data inside the widgets javascript array.

While the first approach seems easier and more isolated and organized (each component holds the data for itself), the second seems a bit less "hackish".

My question is if there are any drawbacks or advantages on these two approches? Is it a bad practice to load a lot of data into a jquery data attribute? Would I have performance issues?

It probably doesn't matter much how you do it, the string is outputted either way, so do what's easiest for you — adeneo, Dec 14 '15 at 15:30
For what it's worth, HTML5 has no arbitrary attribute length defined. http://stackoverflow.com/q/1496096/211627 — JDB, Dec 14 '15 at 15:31

score 1 · Answer 1 · answered Dec 14 '15 at 15:41

Based on my past experience, it become very difficult to manage the array based implementation if you are adding / deleting the DOM elements dynamically, because now you have to manipulate the array accordingly. Instead if you put your content in data attribute it gets associated with DOM element and gets added / deleted with the DOM element, much easier to manage. Not sure if it has any performance implications though, did not face any.

So even though I have used array style content storing in the past, I prefer data attribute way now a days.

score 0 · Accepted Answer · answered Dec 14 '15 at 15:33

I like the putting data on div data attributes more, because this way:

You don't mess with global vars on JS;
You can access it by iterating the DOM on your element or even use data selector to access it.

But I must admit that it always depends, if you need it globally, then for sure use the second method.

Mi-Creativity · Answer 3 · 2015-12-14T15:44:35.953

The data-* attributes are HTML and not jQuery, so you can do the same as the first method but with raw javascript as below: JS Fiddle

var test = document.getElementById('test');
console.log(test.getAttribute("data-test"));

<div id="test" data-test="sample text"></div>

Also you can have the same result if you write it like this"

console.log(test.dataset.test);

For more information https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

score 0 · Answer 4 · answered Dec 14 '15 at 15:53

Second approach is more centralised.

If you need to manipulate or load more data programmatically later on you could do it in the same area since you have access to both rather than editing the attributes directly. Not that there's anything wrong with that but long string in html attributes can be messy and I personally prefer less 'noise' in the html and keep things more accessible in same area when it comes to maintenance.

Storing data inside jQuery's data attribute VS javascript string

4 Answers4