Функции $.data(), $.removeData() и $.hasData()

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

Эти функции работают с хранилищем jQuery для одного DOM-элемента без создания коллекции. Они полезны в плагинах, где ссылка на элемент уже известна: $.data() читает или записывает данные, $.removeData() удаляет их, $.hasData() проверяет наличие данных.

Синтаксис

$.data(element, key, value);
$.data(element, key);
$.data(element);
$.removeData(element, key);
$.removeData(element);
$.hasData(element);

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

element — DOM-элемент, key — строка. Вызов записи $.data(element, key, value) возвращает записанное значение; чтение по ключу — значение или undefined, без ключа — объект данных. Это не цепочка методов коллекции. undefined в третьем аргументе означает чтение.

$.removeData() возвращает undefined. Без ключа очищает все пользовательские данные элемента, но не его HTML-атрибуты и не назначенные обработчики. $.hasData() возвращает логическое значение и не создаёт хранилище только ради проверки.

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

В отличие от .data(), функция $.data() сама не импортирует data-* из HTML. Она читает тот же пользовательский кеш, поэтому данные, уже загруженные методом коллекции, ей доступны.

$.hasData() учитывает также внутренние данные jQuery, включая обработчики событий. Поэтому после удаления всех ваших ключей она может вернуть true. Для проверки конкретного ключа читайте именно этот ключ; для удаления обработчиков используйте .off().

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

• jQuery.data — jQuery API
• jQuery.removeData — jQuery API
• jQuery.hasData — jQuery API

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

Данные без коллекции: попробуйте сами

У элемента есть data-count, но статическое чтение его не импортирует. После записи проверка даёт true, после удаления — false. Используется jQuery 4.0.0.

index.html

HTML

<div id="item" data-count="7">Товар</div>
<pre id="result"></pre>

main.js

JavaScript

const item = document.getElementById('item')
const attributeOnly = $.data(item, 'count')
const saved = $.data(item, 'count', 9)
const exists = $.hasData(item)
$.removeData(item, 'count')
$('#result').text([String(attributeOnly), saved, exists, $.hasData(item)].join(' | '))