Метод data() библиотеки jQuery предоставляет удобный способ привязывать произвольные данные к элементам DOM-дерева и извлекать эти данные в дальнейшем. Это позволяет разработчику хранить вспомогательную информацию непосредственно в HTML-разметке, делая JavaScript-код более читабельным и понятным.
Основы работы метода data()
Давайте рассмотрим базовый синтаксис вызова метода data():
$(selector).data(key, value)- запись данных
$(selector).data(key)- чтение данных
Первым параметром передается ключ, по которому будут записаны или прочитаны данные, вторым параметром - сами данные для записи. Данными могут быть строки, числа, объекты, массивы - любые значения JavaScript.
Например, запишем в переменную phone номер телефона, связанный с блоком на странице:
let phone = '+7 903 123-45-67'; $('#phone-block').data('number', phone); А затем прочитаем эту переменную:
let number = $('#phone-block').data('number'); Основное преимущество метода data() в том, что эти данные не отображаются в HTML-коде напрямую, как обычные атрибуты. Это позволяет хранить вспомогательную информацию, не загромождая разметку.
Взаимодействие data() и data-* атрибутов
Начиная с версии 1.4.3, jQuery автоматически загружает все атрибуты вида data-*, присутствующие в HTML-разметке, во внутреннее хранилище data(). Это означает, что к атрибутам вида data-name можно обращаться как name:
<div data-phone="+71231231231"></div> let phone = $('div').data('phone'); При этом jQuery автоматически парсит значения атрибутов data-* в подходящие типы - числа, булевые значения, объекты и массивы. Это избавляет от необходимости преобразовывать данные вручную.
Однако в некоторых случаях требуется получить изначальное строковое значение атрибута - для этого следует использовать метод attr():
let phone = $('div').attr('data-phone'); 
Расширенные возможности метода data()
Метод data() не ограничивается только взаимодействием с атрибутами data-*. Он позволяет хранить произвольные данные во внутреннем хранилище jQuery - свойстве $.cache.
Например, можно получить сразу все данные, связанные с элементом, в виде объекта JavaScript:
let elementData = $('div').data(); Для непосредственной работы с хранилищем $.cache предназначены методы jQuery.data() и jQuery.removeData(). Они позволяют управлять данными на низкоуровневом API.
Благодаря этому, через метод data() можно реализовывать сложные сценарии хранения вспомогательных данных, связанных с элементами страницы. Например, метод часто используется в плагинах для сохранения конфигурации и состояния.
Применение метода data() на практике
Рассмотрим несколько практических примеров использования метода data():
- Хранение пользовательских настроек элементов интерфейса, например размеров и цветов
- Сохранение промежуточных данных для реализации логики приложения
- Отслеживание текущего состояния элементов, например "загрузка", "ошибка" и т.д.
- Передача данных между обработчиками событий
- Интеграция сторонних jQuery плагинов с использованием метода data()
Гибкость метода data() позволяет применять его в самых разных ситуациях, когда требуется хранить дополнительные данные, связанные с элементами DOM-дерева.
Однако стоит помнить, что чрезмерное увлечение методом data() может негативно сказаться на производительности из-за лишних операций записи и чтения. Поэтому в простых случаях лучше обходиться обычными HTML-атрибутами.
Интеграция метода data() с Ajax
Метод data() часто используется совместно с технологией Ajax в jQuery для передачи дополнительных данных в запросах к серверу.
Например, нужно отправить на сервер некоторые данные о пользователе при запросе:
let userData = { name: 'John', age: 25 }; $.ajax({ url: '/user', method: 'POST', data: userData }); Здесь объект данных передается непосредственно в параметре data ajax-запроса. Но иногда удобнее сохранить эти данные в ассоциированном с элементом виде:
$('#user-button').data('user', { name: 'John', age: 25 }); $('#user-button').click(function() { let user = $(this).data('user'); $.ajax({ url: '/user', method: 'POST', data: user }); }); Организация кэширования с помощью data()
Хранилище $.cache позволяет использовать метод data() для кэширования данных из Ajax запросов.
При первом запросе данные загружаются с сервера и сохраняются во внутреннем хранилище через $.cache. При последующих запросах сначала проверяется кэш - если данные уже есть, они возвращаются из кэша, а не загружаются повторно.
Это позволяет существенно ускорить работу приложения за счет меньшего количества обращений к серверу.
Хранение данных форм с помощью data()
Метод data() - удобный способ хранения вводимых пользователем данных из форм.
Например, для сложной многошаговой формы регистрации можно сохранять промежуточные данные внутри элементов:
// Сохранение данных текущего шага $('#step1-form').data('user', { name: 'John', email: 'john@example.com' }); // Получение данных на следующем шаге let user = $('#step2-form').data('user'); Это избавляет от необходимости передавать данные форм через глобальные переменные или скрытые поля.
Ограничения метода data()
Несмотря на гибкость, у метода data() есть некоторые ограничения:
- Нельзя использовать для элементов
<object> - Работает нестабильно с плагинами Flash
- Поддержка XML-документов зависит от браузера
Поэтому в некоторых случаях приходится использовать альтернативные способы хранения данных, например обычные атрибуты.
