Question

I would like to know the difference between saving data to an element using $(element).data({'foo' : 'bar'}) vs $(element).attr({ 'data-foo' : 'bar' }). And which of the two method would be best to use when saving a large amount of data in to an element? Thanks

Answer 1

The $.data is used for storing information with respect to an element:

Docs:

Store arbitrary data associated with the specified element. Returns
the value that was set.

On the other hand, attr is used to manipulate attributes of an element.

From your question, you seem to store the data, you should use $.data in that case.

data-* attributes are a feature of HTML5

Performance

.data() seems to be much more performance friendly according to this

I also find it cleaner since it’s not visible for everyone in page source.