Storing arbitrary data in HTML

Question

What is the best way to embed data in html elements for later use?

As an example, let's say we have jQuery returning some JSON from the server, and we want to dump that datat out to the user as paragraphs. However, we want to be able to attach meta-data to these elements, so we can events for these later.

The way I tend to handle this, is with some ugly prefixing

function handle_response(data) {
    var html = '';
    for (var i in data) {
        html += '<p id="prefix_' + data[i].id + '">' + data[i].message + '</p>';
    }
    jQuery('#log').html(html).find('p').click(function(){
            alert('The ID is: ' + $(this).attr('id').substr(7));
    });
}

Alternatively, one can build a Form in the paragraph, and store your meta-data there. But, that often feels like overkill.

This has been asked before in different ways, but I do not feel it's been answered well:

• http://stackoverflow.com/questions/432174/how-to-store-arbitrary-data-for-some-html-tags
• http://stackoverflow.com/questions/209428/non-standard-attributes-on-html-tags-good-thing-bad-thing-your-thoughts

Answer 1

depending on what the metadata is for, you could start adding classes to the paragraphs:

<p class="some-paragraph meta meta2 meta3">

This shouldn't affect the styling of your page negatively, unless there are collisions between the metadata and existing CSS classes.

Answer 2

Assuming that you are staying on the page...

jQuery has a data function which allows you to store data on an element by key. eg

$('#mydiv').data('mykey', mydata);

Use the following syntax to retrieve the data:

var x = $('#mydiv').data('mykey');

If you don't know which element to use just use $(document)

Answer 3

HTML5 now supports the data-name syntax for storing abitrary data without non-standard custom attributes

This will of course break validation if your doctype is anything other than HTML5 (although there are ways around this) but it wont affect the rendering or parsing in any browsers I've come across.

Here is an excellent article by John Resig on the matter

Answer 4

One method that I commonly use (in lieu of HTML5's data features) is to make use of hidden input tags eg.

<a href="#" id="containing_element">
Content
<input type="hidden" id="key" value="value" />
</a>

Then, if you don't mind a jQuery example..

$('a#containing_element').click(function(){
     var data = $(this).children('input#key').attr('value');
});

Simple, it validates, it works now and you can use this to store whatever sort of information you like (even arrays if you serialize and htmlencode them)

Answer 5

As an alternative to the other methods mentioned, if you're willing to exclude IE6 (it's about that time), you can use DOM storage (i.e. the globalStorage, sessionStorage and localStorage objects) to store your JSON string. These objects are key value stores, so if the browsers you're targeting support this feature (part of the HTML5 specs), then this is probably easier than storing data in arbitrary HTML elements. See here for more info.