Как сохранить данные для элемента HTML в JavaScript

Если вы работали с манипуляциями с Vanilla DOM, вы, вероятно, оказались в ситуации, когда вам нужно сохранить данные, связанные с элементом. Посмотрим, как мы можем это сделать.

Впервые вы, вероятно, придумали идею сохранить данные на самом объекте элемента, как это

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'));

Даже если этот метод работает, это не хорошо. Добавление пользовательских реквизитов в объект элемента не рекомендуется, и это может вызвать утечки памяти, если не сделано правильно.

Итак, как правильно это сделать?

Правильный способ – использовать Слабая карта хранить данные для элемента. Код будет выглядеть так

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'));

Таким образом, мы можем сохранить данные для элемента, не вызывая утечки памяти. Если вы не знаете, что Слабая карта есть, Проверьте документы MDN .

Увидимся!

Оригинал: “https://dev.to/sarsamurmu/how-to-save-data-for-a-html-element-in-javascript-4bp8”