Методы .data() и .removeData()

Определение и применение

Метод .data() связывает с DOM-элементом данные JavaScript, например состояние раскрытой карточки. Метод .removeData() удаляет эти значения из хранилища jQuery. Данные могут быть объектами и числами: превращать их в строки HTML-атрибутов не требуется.

Синтаксис

collection.data(key, value);
collection.data({ key: value });
collection.data(key);
collection.data();
collection.removeData(key);
collection.removeData(["first", "second"]);
collection.removeData();

Параметры и возвращаемое значение

key — строковое имя. Запись выполняется для всех элементов и возвращает исходную коллекцию. Чтение по имени возвращает значение первого элемента или undefined; вызов без аргументов возвращает объект его данных. .removeData() возвращает коллекцию; без аргумента удаляет все пользовательские данные, со строкой или массивом — выбранные ключи.

.data(object) поверхностно дополняет данные: вложенные объекты не объединяются рекурсивно. undefined не сохраняется как значение. Имена вида user-name нормализуются в userName.

При первом чтении значения jQuery может получить его из data-*. Строки true, false, null, подходящие числовые строки и корректные JSON-объекты/массивы преобразуются в значения JavaScript. Строка "010" остаётся строкой, чтобы не потерять её запись. Затем используется кеш: изменение атрибута не обновляет уже прочитанное значение.

Особенности и совместимость

Запись через .data() не меняет атрибут. Для HTML-атрибутов используйте .attr(), для удаления атрибута — .removeAttr(). После .removeData("count") следующий вызов .data("count") может снова прочитать сохранившийся data-count. Повторный массовый вызов .data() не сканирует все атрибуты заново.

В 4.0 объект данных не следует проверять его собственным методом hasOwnProperty: используйте Object.hasOwn(data, key). Для жизни данных только в JavaScript также подходит WeakMap; это отдельное хранилище, не связанное с кешем jQuery.

Документация

• data — jQuery API
• removeData — jQuery API

Пример использования

Кеш данных и HTML-атрибут: попробуйте сами

Прочитайте исходное значение, измените атрибут и сравните чтение до и после удаления кеша. Результат: 2, 2, 5. Используется jQuery 4.0.0.

index.html

HTML

<div id="card" data-count="2">Карточка</div>
<pre id="result"></pre>

main.js

JavaScript

const card = $('#card')
const before = card.data('count')
card.attr('data-count', '5')
const cached = card.data('count')
card.removeData('count')
$('#result').text([before, cached, card.data('count')].join(', '))