Хранение произвольных данных в 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-* атрибуты.

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

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