Using jQuery data() vs native javascript getAttribute vs input hidden

I would go with data attributes because that's what they are for and modern browsers have a native api for accessing them, while still allowing non-modern browsers to access them as custom attributes.

given this html:

<div data-foo="bar"></div>

// modern browser:
foo = document.getElementByID("myelementid").dataset.foo;

// older browser:
foo = document.getElementByID("myelementid").getAttribute("data-foo");

// jQuery (all browsers)
foo = $("#myelementid").data("foo");

Note if your data attribute is data-foo-bar, the key in dataset and .data will be fooBar

As sdespont mentions, the data should be relevant to the element you are storing it on.

Update:
It's also important to note that you can also get the value of a data attribute using the .attr method, however there is a pretty important difference between the two. Getting a data attribute's value with .data will attempt to parse the value of the attribute into the correct javascript type, for example, if it can be converted to an int, it will be converted to an int. If it can be converted into an object or an array, it will be converted to an object or an array. If you instead used .attr(), you can be sure that you will always have a string.

Probably also worth mentioning that using .attr() should be prefered over .data() unless you specifically need the features given by .data() due to the fact that by using .data(), a data cache will be created for that element and it's data, which isn't needed unless you actually intend to use .data() multiple times or need the extra features provided by .data()