logo

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

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

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

JS
Скопировать код
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:

json
Скопировать код
{ "key": "value" }

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

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

JS
Скопировать код
var user = $('#element').data('json');
console.log(user.name);

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

JS
Скопировать код
let encodedData = btoa(JSON.stringify(myJson));
$('#element').attr('data-json', encodedData);

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

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

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

HTML
Скопировать код
<script type="application/json" id="jsonData">
    { "key": "value" }
</script>

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

JS
Скопировать код
let myJson = JSON.parse($('#jsonData').html());

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

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

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

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

HTML
Скопировать код
<div data-birdhouse='{"type": "sparrow", "message": "tweet"}'></div>
Markdown
Скопировать код
📬: (ДО) – Пустой ящик
🕊️→📬: (ПРИБЫЛО) – Прибыло сообщение!
📬: (ПОСЛЕ) – Ящик полон сообщений.
Markdown
Скопировать код
<div>🏷️ Data ✉️ JSON 💌 jQuery</div>

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

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

Щит от XSS-атак

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

JS
Скопировать код
var safeData = encodeURIComponent(JSON.stringify(myJson));
$('#element').attr('data-json', safeData);

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

JS
Скопировать код
var jsonData = JSON.parse(decodeURIComponent($('#element').attr('data-json')));

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

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

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

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

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

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

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

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

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

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

JS
Скопировать код
$('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-атак.