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.
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')
Use Custom event which can store data in the detail
Ref: How can I transfer data to firefox extension from web page
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";
