What is the correct way to store data in the DOM

Question

I have recently been using the title tag in various HTML elements to store data in JSON format in the DOM.

Is this a bad approach (I am assuming it is)? What is the correct way to accomplish this that works well with jQuery? By "works well" I mean

$("myButton").click(function (e) {
     var myData;
     eval("myData=" + $(this).attr("title"));
});

Works pretty well but again I am assuming there is a better way to do this no?

PS: BTW how does the title tag of HTML elements actually work? I cant seem to find where it actually ends up getting used?

PSS: Can I also get a jQuery based and Non jQuery response? (Sorry to be fussy)

Answer 1

eval("myData=" + $(this).attr("title"));

This is almost a legal reason to slap you! (j/k)

You should use your own namespace object to store data "globally". In that context, globally means only global in your application code and not using the global object (window in a browser).

var my_application = {};

$('myButton').click(function() {
  my_application.myData = $(this).attr('title');
});

This is a very basic strategy of course. In your particular case, you can also use jQuery's .data() method to attach data to a DOM node.

$('myButton').click(function() {
   $.data(this, 'myData', this.title);
});

Ref.: .data(), jQuery.data()

Answer 2

In your example, I'd suggest doing the following which does not expose you to the security risks of 'eval':

myData = JSON.decode($(this).attr("title"));

In general it's a valid approach to holding non-secure data. You have a number of other options too:

• Use JQuery's .data() methods:

  myData = $this.data("foo");

• In HTML5 you now can use custom data attributes (Eg "") as an attribute on any element. http://html5doctor.com/html5-custom-data-attributes/

• You could use Local Storage if you know it is available. http://dev.w3.org/html5/webstorage/

• You could use Backbone.js on top of Jquery to give you a more abstracted way of handling your data as Models. http://documentcloud.github.com/backbone/