Атрибут data-* тега <body>
Описание
Атрибуты data-* позволяют хранить произвольные данные в HTML-элементе. Для тега <body> они часто используются для:
- Хранения глобальных параметров приложения
- Передачи данных с сервера клиенту
- Конфигурации JavaScript-компонентов
- Отслеживания состояния страницы
<body data-theme="dark"
data-user-id="12345"
data-page-type="product"
data-feature-flags="new-header,chat-widget">
<!-- Содержимое страницы -->
</body>
Доступ к данным через JavaScript:
| Метод | Пример | Описание |
|---|---|---|
dataset |
document.body.dataset.theme |
Доступ через объект dataset (kebab-case преобразуется в camelCase) |
getAttribute |
document.body.getAttribute('data-theme') |
Прямой доступ к атрибуту |
Рекомендации по использованию:
- Используйте осмысленные имена после префикса
data- - Для сложных данных используйте JSON в одном атрибуте
- Храните только строковые значения (числа преобразуйте)
- Избегайте хранения больших объемов данных
- Не используйте для чувствительной информации
Практические примеры:
1. Хранение конфигурации
<body data-config='{"apiUrl":"/api/v1","maxItems":10}'>
<script>
const config = JSON.parse(document.body.dataset.config);
console.log(config.apiUrl); // /api/v1
</script>
</body>
2. Передача данных с сервера
<!-- Серверный рендеринг (пример на PHP) -->
<body data-user='<?= json_encode($user) ?>'>
<script>
const userData = JSON.parse(document.body.dataset.user);
console.log('Добро пожаловать,', userData.name);
</script>
</body>
Работа с dataset в JavaScript:
// Чтение данных
const theme = document.body.dataset.theme;
const userId = parseInt(document.body.dataset.userId);
// Запись данных
document.body.dataset.theme = 'light';
document.body.dataset.lastActive = new Date().toISOString();
// Удаление данных
delete document.body.dataset.featureFlags;
// Проверка наличия атрибута
if ('featureFlags' in document.body.dataset) {
const flags = document.body.dataset.featureFlags.split(',');
}
Особенности именования:
| HTML | JavaScript (dataset) |
|---|---|
data-user-id |
dataset.userId |
data-page-type |
dataset.pageType |
data-http-referer |
dataset.httpReferer |
Безопасность и производительность:
- Всегда экранируйте данные перед вставкой в HTML
- Для сложных структур используйте один data-атрибут с JSON
- Избегайте хранения дублирующихся данных
- Не используйте для критически важной конфигурации
- Удаляйте временные data-атрибуты после использования
Примечание: Атрибуты data-* предоставляют удобный способ хранения дополнительной информации в разметке, но для сложных state-менеджментов предпочтительнее использовать специализированные решения (Redux, Vuex, Context API).