Хранение произвольных данных в HTML тегах: JS интеракция
Быстрый ответ
Стандарт HTML5 предусматривает использование атрибутов data-*
для сохранения пользовательских данных в HTML-элементах. Эти атрибуты дают возможность привязывать необходимую информацию непосредственно к элементам. Ниже представлен пример:
<div id="infoDiv" data-name="Алиса" data-age="30"></div>
А для обращения к этим данным посредством JavaScript можно использовать следующий способ:
let info = document.querySelector('#infoDiv').dataset;
console.log(info.name); // В результате получим "Алиса"
console.log(info.age); // В результате получим "30"
Также вы можете генерировать данные на сервере и обращаться к ним с использованием методов .data()
в библиотеке jQuery:
$('#infoDiv').data('role', 'admin');
console.log($('#infoDiv').data('role')); // В результате получим "admin"
Использование атрибутов, таких как href
, или создание своих объектов JavaScript, может усложнить поддержку кода и привести к ошибкам.
Эффективное сохранение данных в HTML
Применение JSON для структурированных данных
JSON идеально подходит для сохранения структурированных данных:
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Person",
"name": "Алиса",
"jobTitle": "Разработчик"
}
</script>
Не используйте функцию eval()
для безопасного чтения данных из JSON:
let rawData = document.querySelector('script[type="application/ld+json"]').textContent;
let jsonData = JSON.parse(rawData);
console.log(jsonData.name); // В результате получим "Алиса"
Применение свойств JavaScript
Если атрибуты data-*
оказались недостаточными, данные можно сохранять в свойствах DOM-элементов:
let infoDiv = document.getElementById('infoDiv');
infoDiv.customData = { name: "Алиса", age: 30 };
console.log(infoDiv.customData.name); // В результате получим "Алиса"
С одной стороны это удобно, но с другой стороны, такой подход может быть не лучшим выбором для обмена данными, ведь он отсоединяет их от HTML-структуры.
Компромиссы
Каждый способ сохранения данных имеет свои плюсы и минусы:
- Атрибуты
data-*
— универсальны и стандартизированы, но при их чрезмерном использовании HTML может становиться перегруженным. - JSON — идеальный для структурированных данных, но требует точного форматирования и валидации.
- Свойства JavaScript — просты в использовании, но управление ими и поддержка могут быть более сложными.
Визуализация
Хранение данных в HTML-элементах можно представить как набор инструментов:
- HTML-элемент (🔖): это ваш надёжный ящик для инструментов.
- Атрибуты данных (data-*): непосредственно сами инструменты.
Когда вы добавляете в него различные инструменты:
<div data-hammer="yes" data-screwdriver="phillips"></div>
Ваш ящик наполняется нужным оборудованием:
🔖 До: [Пусто]
🔖 После: [🔨 Молоток, 🔧 Отвертка Phillips]
Используйте атрибуты data-*
для решения разных задач точно так же, как вы используете инструменты для выполнения определенных задач!
Кроссбраузерная совместимость
Атрибуты data-*
хорошо поддерживаются большинством браузеров, но в режиме XHTML они могут быть проигнорированы. Всегда тестируйте код в различных браузерах и документах.
Убедитесь, что данные доступны не только через JavaScript, чтобы избежать проблем с доступностью.
Для лучшей структурированности кода рекомендуется группировать вместе связанные data-*
атрибуты.
Полезные материалы
- HTML Стандарт — информация о пользовательских данных.
- Атрибут data-* в HTML — применение атрибутов данных.
- Использование атрибутов данных – Обучение веб-разработке | MDN — детальное руководство по атрибутам данных.
- .data() | jQuery API Документация — работа с атрибутами данных с использованием jQuery.
- Полное руководство по атрибутам данных | CSS-Tricks — все об атрибутах данных.
- JSON-LD – JSON для связывания данных — организация и связывание данных при помощи JSON.
- Как и почему использовать пользовательские атрибуты данных в HTML — SitePoint — преимущества использования пользовательских data-атрибутов.