jquery - store and retrieve javascript arrays into and from HTML5 data attributes

Question

How can a javascript Array be stored in an HTML5 data attribute?

I've tried every variation of JSON.stringifycation and escaping characters.

What is the precise method to store the array and retrieve it again?

note

I build the array with [ $("#firstSelectedElement").val(), $("#secondSelectedElement").val() ]. I retrieve id="storageElement" data-storeIt="stuff" with $("#storageElement").data('storeit').

I can never seem to retrieve the data as a true Array, only an Array of characters.

Answer 1

It turned out that you could use the html escaped characters in the element data attribute to have json-like array (encoded are quotes):

<div id="demo" data-stuff='[&#34;some&#34;, &#34;string&#34;, &#34;here&#34;]'></div>

And then in javascript get it without any additional magic:

var ar = $('#demo').data('stuff');

Check this fiddle out.

Edited (2017)
You don't need to use html escaped characters in the data attribute.

<div id="demo" data-stuff='["some", "string", "here"]'></div>

Check this new fiddle out.