Can I store custom attributes in HTML DOM like a database record?

Question

When developing for browsers FF3 and IE6/7 with jQuery, are there any compatibility issues when setting custom attributes on HTML tags?

First, I\'m aware of jQuery\'s

Answer 1

Have a look at http://www.persvr.org/

Persevere features a new native object storage engine called JavaScriptDB that provides high-end scalability and performance

http://ajaxian.com/archives/perseveres-javascriptdb-impressive-json-performance

Answer 2

Absent some standard way to do this in HTML4, I would be tempted to create a hidden element that corresponds to my draggable and store the associated data in it. Name the hidden element relative to the draggable so that you can easily lookup the information for it. The following extension implements this using a hidden span. Note: in testing it I couldn't replicate your issues with draggable items -- data() seemed to work fine for me, but I didn't test it with various plugins, just UI.Draggable.

Usage:

$('#draggableDiv').externalData('key','data');
var d = $('#draggableDiv').externalData('key');

jQuery.fn.externalData = function(key, data) {
    var value = this;
    this.each( function() {
        var id = this.id+'_external_data';
        var elem = jQuery('#'+id+':first');
        if (elem.size() == 0) {
            elem = $('<span style="display: none;" id="' + id + '"></span>"' );
            elem.appendTo(document.body);
        }
        if (data) {
            elem.data(key,data);
        }
        else {
            value = elem.data(key);
            return false;
        }
    });
    return value;
};

Answer 3

Take a look at this similar question I asked a while back: Can I just make up attributes on my HTML tags?

Personally, I don't really like the suggested answers of putting all your data into the class attribute. It feels, just... wrong you know? In my experience, though your page won't be valid if you make up attributes, I just do it anyway. Test it in the 4 major browsers and if it works, who cares?

The best solution which i can think of is one which isn't valid now, but will be in HTML5, so that's good. As suggested by ms2ger in that other question, prefix your custom attributes with data-

http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#embedding-custom-non-visible-data

Answer 4

The new HTML 5 data attributes might be what you are looking for.

http://ejohn.org/blog/html-5-data-attributes/

http://dev.w3.org/html5/spec/Overview.html#custom

Answer 5

This is relatively unknown but pretty dang useful: jQuery Metadata Plugin. It will let you store data within class names for retrieval. Its mostly used for the validation plugin but, really, can be adapted to any scenario.

Good luck with whatever you are working on.