How to save data for a HTML element in JavaScript

#javascript #dom #webdev

If you've worked with vanilla DOM manipulation, you've probably found yourself in a situation when you have to save data associated with an element. Let's see how we can do this.

For the first time, you probably came up with the idea to save the data on the element object itself, like this

const setElementData = (el, data) => {
  el.$dataKey = data;
}

const getElementData = (el) => {
  return el.$dataKey;
}

// Usage
setElementData(document.querySelector('#some-el'), {
  prop1: 'val',
  prop2: someComplexValue
});

// Somewhere
const elData = getElementData(document.querySelector('#some-el'));

Even if this method works, it's not good. Adding custom props to an element object is not recommended and it can cause memory leaks if not done correctly.

So, what's the correct way to do it?

The correct way is to use a WeakMap to store data for an element. The code will look like this

const elementDataMap = new WeakMap();

const setElementData = (el, data) => {
  elementDataMap.set(el, data);
}

const getElementData = (el) => {
  return elementDataMap.get(el);
}

// Usage
setElementData(document.querySelector('#some-el'), {
  prop1: 'val',
  prop2: someComplexValue
});

// Somewhere
const elData = getElementData(document.querySelector('#some-el'));

This way we are able to save data for an element without causing memory leaks. If you don't know what WeakMap is, check out the MDN docs.

See ya!

Top comments (3)

Michael Currin • Sep 4 '20 • Edited

In Python there is weakref too by the way but of course won't help with the DOM

docs.python.org/3/library/weakref....

Several built-in types such as list and dict do not directly support weak references but can add support through subclassing:

class Dict(dict):
    pass

obj = Dict(red=1, green=2, blue=3)   # this object is weak referenceable

Michael Currin • Sep 4 '20 • Edited

Thanks for sharing. I hadn't heard of WeakMap.
I think your two get and set functions, in both cases, add unnecessary complexity and the built methods can make it clearer.

This below is much easier to follow for me and avoids relying on functions to have side effects on a global object.

let elementDataMap = new WeakMap()

const someEl = document.querySelector('#some-el')

elementDataMap.set(
  someEl, {
    prop1: 'val',
    prop2: someComplexValue
});

const elData = elementDataMap.get(someEl);

I can see how putting use of .$dataKey in a function can help in larger application but in the first case you could just set and get directly without the functions.

Also I think it should be mentioned that you can't use this .get on any element to find its data unless you first make a map and send data on the map.

Sarsa Murmu • Sep 4 '20

That's good too. The main thing is the WeakMap after all, you can use it in any way you like to 😀

DEV Community

How to save data for a HTML element in JavaScript

Top comments (3)

Read next

A Beginner’s Guide to Component Testing with Playwright

Software Engineers Do NOT Want to Be Efficient

Data Fetching in React

Fitter - Open Source no-code tool for map-reduce data from different source and even more!