Сохранение и получение JSON объекта в HTML через data- атрибут

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

Чтобы сохранить объект JSON в HTML-элементе, воспользуйтесь сериализацией посредством JSON.stringify() и поместите его в data-атрибут, используя метод .data() из jQuery. Для выделения этого объекта примените JSON.parse().

let myJson = { key: 'value' };
let myJsonString = JSON.stringify(myJson);

$('#element').data('json', myJsonString);

let backToJson = JSON.parse($('#element').data('json'));

Такой подход позволяет удобно сохранять и извлекать объекты в формате JSON.

JSON + data-атрибут: правила использования

Почему необходимы двойные кавычки?

За валидностью вашего JSON всегда стоит следить: ключи следует оборачивать в двойные кавычки, это позволит без проблем преобразовывать строки в объекты JavaScript:

{ "key": "value" }

Подробнее об этом расскажет наш спикер на видео

Доступ к данным: прямой или косвенный?

Для скоростного доступа к свойствам объекта JSON обращайтесь к ним напрямую:

var user = $('#element').data('json');
console.log(user.name);

Если вы работаете с большим объемом данных, то закодируйте их через base64:

let encodedData = btoa(JSON.stringify(myJson));
$('#element').attr('data-json', encodedData);

let decodedData = JSON.parse(atob($('#element').attr('data-json')));

Теги script для хранения больших объемов данных

Размещайте большие объемы JSON с применением тега script:

<script type="application/json" id="jsonData">
    { "key": "value" }
</script>

Извлекайте данные используя JSON.parse():

let myJson = JSON.parse($('#jsonData').html());

Бережное отношение к данным

Как это бывает и при покупке продуктов, следите за хранением данных, чтобы избедать неприятных сюрпризов!

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

Смотрите на data-атрибуты как на почтовые ящики для сообщений:

<div data-birdhouse='{"type": "sparrow", "message": "tweet"}'></div>

📬: (ДО) – Пустой ящик
🕊️→📬: (ПРИБЫЛО) – Прибыло сообщение!
📬: (ПОСЛЕ) – Ящик полон сообщений.

<div>🏷️ Data ✉️ JSON 💌 jQuery</div>

// 🏷️ – Это метка (data).
// ✉️ – Упакованные в JSON данные.
// 💌 – Благодаря jQuery эти данные мы можем извлечь.

Гигиена кода и отладка

Щит от XSS-атак

Для обеспечения защиты от XSS-атак применяйте encodeURIComponent() совместно с JSON.stringify():

var safeData = encodeURIComponent(JSON.stringify(myJson));
$('#element').attr('data-json', safeData);

Обеспечьте безопасное извлечение информации с использованием decodeURIComponent() и JSON.parse():

var jsonData = JSON.parse(decodeURIComponent($('#element').attr('data-json')));

Когда объект становится [Object Object]

Иногда, вместо ожидаемых данных, вы получаете [Object Object]. Чтобы этого избежать, важно разбираться в типах данных.

Процесс отладки

После внесения таких изменений в код, удостоверьтесь в правильности сохранения данных, используя console.log():

$('#element').attr('data-json', myJsonString);
var checkData = $('#element').attr('data-json');
console.log('Сохранённые данные:', checkData);

Профессиональные советы по работе со структурированными данными

Многофункциональность data-атрибутов

Data-атрибуты способны эффективно хранить сложные данные для работы JavaScript. При наличии валидного JSON, jQuery в этом вам поможет.

Скрипт для сохранения данных

Применение скрипта позволяет отделить данные от разметки, что делает структуру данных более чистой и понятной:

$('body').append('<script type="application/json" id="jsonData">{ "key": "value" }</script>');

Чеклист лучших практик

1. Проверяйте целостность данных после их обработки.
2. Пользуйтесь авторитетными ресурами, такими как MDN, для изучения хороших практик.
3. После каждого внесенного изменения проводите функциональное тестирование.
4. Если вы работаете со сложными структурами данных, применяйте кодирование в base64.
5. Для проверки данных обращайтесь к свойствам напрямую.

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

1. Использование data-атрибутов — Детальное руководство.
2. .data() | jQuery API Documentation — Документация по методу .data().
3. JSON.stringify() – JavaScript — Сериализация объектов.
4. HTML data-* Attribute — Примеры использования data-*.
5. jQuery Data vs Attr? – Stack Overflow — Сравнение .data() и .attr() на Stack Overflow.
6. Полное руководство по data-атрибутам | CSS-Tricks — Эффективные методы применения data-атрибутов.
7. Предотвращение XSS — Рекомендации OWASP по предотвращению XSS-атак.