Replacement for DOM3 getUserData/setUserData metho

Question

So we've got some old-school Firefox extension code that uses the DOM3 methods get/setUserData() to pass around data in the DOM. Unfortunately, these have been deprecated in DOM4, so Firefox is planning to drop support for them, and Chrome never supported them in the first place.

Is there a cross-browser replacement? jQuery's $.data seems to be an option, but 'pure' JavaScript would be preferable.

Answer 1

Use Custom event which can store data in the detail

Ref: How can I transfer data to firefox extension from web page

Answer 2

Just set any property you want on the element.

element.key = value;

DOM elements/nodes are just JavaScript objects. To avoid name clashes with native properties (like id, etc.), you could prefix your keys with an underscore.

element._id = "foo";

Answer 3

So in the end we decided to go with jQuery after all, the core library is only around 75k and it solves the problem very cleanly:

element.getUserData('foo') --> $(element).data('foo')

element.setUserData('foo', 'bar', null) --> $(element).data('foo', 'bar')