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:

possible duplicate of Non-Standard Attributes on HTML Tags. Good Thing? Bad Thing? Your Thoughts? — Ciro Santilli OurBigBook.com
– Ciro Santilli OurBigBook.com, Commented Jan 31, 2014 at 11:07

Neil Aitken · Accepted Answer · 2010-05-05 10:14:01Z

7

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

answered May 5, 2010 at 10:14

Neil Aitken

7,8393 gold badges44 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jeriko Over a year ago

+1 This is the best way to do it - your validation won't break if you prefix the attribute with "data-". I believe jQuery's metadata plugin (plugins.jquery.com/project/metadata) uses this method

Rob Colburn Over a year ago

A bit concerned about validation, but more concerned about legacy browsers. I believe some browsers may treat unrecognized element attributes as invalid code, and discard them - thereby preventing their retrieval in javascript.

James Westgate · Accepted Answer · 2010-05-05 10:01:20Z

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)

answered May 5, 2010 at 10:01

James Westgate

11.5k8 gold badges66 silver badges69 bronze badges

1 Comment

Rob Colburn Over a year ago

You could use data function for (var i in data) { $('#log').append($(''+data[i].message+'').data('d',data[i])); } $('#log').find('p').click(function(){ alert('The ID is: '+$(this).data('d').id); }); Or, bind individually function format(d) { return $(''+d.message+'').click(function(){ alert('The ID is: '+d.id); }); } for (var i in data) { $('#log').append(format(data[i])); } Not sure which performs better, especially for larger datasets.

MeatFlavourDev · Accepted Answer · 2010-10-13 23:01:43Z

2

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)

answered Oct 13, 2010 at 23:01

MeatFlavourDev

1,1991 gold badge11 silver badges23 bronze badges

Comments

Carson Myers · Accepted Answer · 2010-05-05 10:00:44Z

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.

answered May 5, 2010 at 10:00

Carson Myers

38.7k42 gold badges131 silver badges183 bronze badges

1 Comment

Rob Colburn Over a year ago

This works well when you want to store some fact about each element, for instance . But, not so well when you want to retrieve store data, for instance a unique-id.

wsanville · Accepted Answer · 2010-10-13 23:08:21Z

1

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.

answered Oct 13, 2010 at 23:08

wsanville

37.6k8 gold badges78 silver badges102 bronze badges

2 Comments

MeatFlavourDev Over a year ago

Interesting. Was not aware of these features (although I haven't worked on a web based software project in over a year and I believe these features are still relatively new?)

wsanville Over a year ago

Even IE8 supports some parts of DOM storage, which came out in 2008. So that part of the HTML 5 specs has had some time to propagate. That, and this answer is almost 2 years old :o

Collectives™ on Stack Overflow

Storing arbitrary data in HTML

5 Answers 5

2 Comments

1 Comment

Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related