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 data() function and it essentially does what I want, but the data doesn't survive a clone() function. This is an issue when using the jQuery UI draggable/droppable plugins because it clones DOM elements during a drag/drop. For the purpose of this question, I need an alternative to data().

I want to persist data between drag/drop operations. I want to be able to inject data into the DOM element that is moved during a drag/drop operation. To do this, I can build HTML child elements to simulate a database record. Quick experimentation shows that Firefox has no issues utilizing any attribute names I want to store fields of data. However, the HTML 4 spec says that certain tags can only contain certain attribute names. Will populating the DOM with nonstandard attributes cause incompatibility issues with the browsers I've mentioned?

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

Take a look at this similar question I asked a while back: http://stackoverflow.com/questions/427262/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 3

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 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.