Бесплатный вебинар
«как найти любимую работу»
Подарки на 150 000 ₽ за участие
Живой эфир
Записи не будет!
00:00:00:00
дн.ч.мин.сек.

Хранение произвольных данных в HTML тегах: JS интеракция

Быстрый ответ

Стандарт HTML5 предусматривает использование атрибутов data-* для сохранения пользовательских данных в HTML-элементах. Эти атрибуты дают возможность привязывать необходимую информацию непосредственно к элементам. Ниже представлен пример:

HTML
Скопировать код
<div id="infoDiv" data-name="Алиса" data-age="30"></div>

А для обращения к этим данным посредством JavaScript можно использовать следующий способ:

JS
Скопировать код
let info = document.querySelector('#infoDiv').dataset;
console.log(info.name); // В результате получим "Алиса"
console.log(info.age); // В результате получим "30"

Также вы можете генерировать данные на сервере и обращаться к ним с использованием методов .data() в библиотеке jQuery:

JS
Скопировать код
$('#infoDiv').data('role', 'admin');
console.log($('#infoDiv').data('role')); // В результате получим "admin"

Использование атрибутов, таких как href, или создание своих объектов JavaScript, может усложнить поддержку кода и привести к ошибкам.

Кинга Идем в IT: пошаговый план для смены профессии

Эффективное сохранение данных в HTML

Применение JSON для структурированных данных

JSON идеально подходит для сохранения структурированных данных:

HTML
Скопировать код
<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Person",
  "name": "Алиса",
  "jobTitle": "Разработчик"
}
</script>

Не используйте функцию eval() для безопасного чтения данных из JSON:

JS
Скопировать код
let rawData = document.querySelector('script[type="application/ld+json"]').textContent;
let jsonData = JSON.parse(rawData);
console.log(jsonData.name); // В результате получим "Алиса"
Подробнее об этом расскажет наш спикер на видео
skypro youtube speaker

Применение свойств JavaScript

Если атрибуты data-* оказались недостаточными, данные можно сохранять в свойствах DOM-элементов:

JS
Скопировать код
let infoDiv = document.getElementById('infoDiv');
infoDiv.customData = { name: "Алиса", age: 30 };
console.log(infoDiv.customData.name); // В результате получим "Алиса"

С одной стороны это удобно, но с другой стороны, такой подход может быть не лучшим выбором для обмена данными, ведь он отсоединяет их от HTML-структуры.

Компромиссы

Каждый способ сохранения данных имеет свои плюсы и минусы:

  • Атрибуты data-* — универсальны и стандартизированы, но при их чрезмерном использовании HTML может становиться перегруженным.
  • JSON — идеальный для структурированных данных, но требует точного форматирования и валидации.
  • Свойства JavaScript — просты в использовании, но управление ими и поддержка могут быть более сложными.

Визуализация

Хранение данных в HTML-элементах можно представить как набор инструментов:

Markdown
Скопировать код
- HTML-элемент (🔖): это ваш надёжный ящик для инструментов.
- Атрибуты данных (data-*): непосредственно сами инструменты.

Когда вы добавляете в него различные инструменты:

HTML
Скопировать код
<div data-hammer="yes" data-screwdriver="phillips"></div>

Ваш ящик наполняется нужным оборудованием:

Markdown
Скопировать код
🔖 До: [Пусто]
🔖 После: [🔨 Молоток, 🔧 Отвертка Phillips]

Используйте атрибуты data-* для решения разных задач точно так же, как вы используете инструменты для выполнения определенных задач!

Кроссбраузерная совместимость

Атрибуты data-* хорошо поддерживаются большинством браузеров, но в режиме XHTML они могут быть проигнорированы. Всегда тестируйте код в различных браузерах и документах.

Убедитесь, что данные доступны не только через JavaScript, чтобы избежать проблем с доступностью.

Для лучшей структурированности кода рекомендуется группировать вместе связанные data-* атрибуты.

Полезные материалы

  1. HTML Стандарт — информация о пользовательских данных.
  2. Атрибут data-* в HTML — применение атрибутов данных.
  3. Использование атрибутов данных – Обучение веб-разработке | MDN — детальное руководство по атрибутам данных.
  4. .data() | jQuery API Документация — работа с атрибутами данных с использованием jQuery.
  5. Полное руководство по атрибутам данных | CSS-Tricks — все об атрибутах данных.
  6. JSON-LD – JSON для связывания данных — организация и связывание данных при помощи JSON.
  7. Как и почему использовать пользовательские атрибуты данных в HTML — SitePoint — преимущества использования пользовательских data-атрибутов.
Проверь как ты усвоил материалы статьи
Пройди тест и узнай насколько ты лучше других читателей
Какой атрибут в HTML5 используется для хранения произвольных данных?
1 / 5