How to associate javascript objects with DOM nodes?

Question

Can I, and if so, how can I associate javascript objects with DOM nodes? My requirements:

• real objects, not just JSON-stringified-attributes or so
• shouldn't leak memory
• should also work in non-standard browsers like IE8 or so

I was thinking about doing it with a global array that holds the data and putting the indexes in attributes of the nodes, but that would leak memory because there's still a reference from the array to the data when the nodes aren't in th DOM anymore. It's for a web application, so that could be an issue.

Answer 1

Well, jQuery has the data system, which you could give a try. They say it's free from memory leaks.

Answer 2

Perfect use case for the WeakMap, assuming your targeting newer browsers (chrome 36, edge 12, IE 11, firefox 36, safari 7.1):

let map = new WeakMap();
let node = document.getElementById("unicorn");
let data = {};

window.map.set(node, data);

this wont leak since the keys of the WeakMap are weakly referenced.