Хранение произвольных данных в HTML

Question

Каков наилучший способ встраивания данных в элементы html для последующего использования?

В качестве примера предположим, что у нас есть jQuery, возвращающий некоторый JSON с сервера, и мы хотим выгрузить этот файл для пользователя в виде абзацев. Тем не менее, мы хотим иметь возможность прикреплять метаданные к этим элементам, чтобы мы могли события для них позже.

То, как я, как правило, справиться с этим, это с какой-то некрасиво предваряя

function handle_response(data) { 
    var html = ''; 
    for (var i in data) { 
     html += '<p id="prefix_' + data[i].id + '">' + data[i].message + '</p>'; 
    } 
    jQuery('#log').html(html).find('p').click(function(){ 
      alert('The ID is: ' + $(this).attr('id').substr(7)); 
    }); 
} 

В качестве альтернативы, можно построить форму в пункте, и хранить мета-данные там. Но это часто кажется излишним.

Это было предложено до по-разному, но я не чувствую, что это был дан ответ хорошо:

• How to store arbitrary data for some HTML tags
• Non-Standard Attributes on HTML Tags. Good Thing? Bad Thing? Your Thoughts?

Answer 1

HTML5 теперь поддерживает синтаксис data-name для хранения abitrary данные без нестандартных пользовательских атрибутов

Это, конечно же, будет разорвать проверку, если ваш doctype - это что-то другое, кроме HTML5 (хотя есть способы обойти это), но это не повлияет на рендеринг или синтаксический анализ в любых браузерах, с которыми я столкнулся.

Вот excellent article by John Resig по этому вопросу

Answer 2

в зависимости от того, что метаданные для, вы могли бы начать добавлять классы к параграфам:

<p class="some-paragraph meta meta2 meta3"> 

Это не должно отрицательно влиять на стиль вашей страницы, если не возникли столкновения между метаданными и существующими классами CSS.

Answer 3

Предполагая, что вы находитесь на странице ...

JQuery имеет функцию данных, которая позволяет хранить данные на элементе с помощью ключа. например

$('#mydiv').data('mykey', mydata); 

Используйте следующий синтаксис для извлечения данных:

var x = $('#mydiv').data('mykey'); 

Если вы не знаете, какой элемент использовать только использовать $(document)

Answer 4

Один метода, который я обычно использую (вместо функций данных в HTML5), является использование скрытых тегов ввода например.

<a href="#" id="containing_element"> 
Content 
<input type="hidden" id="key" value="value" /> 
</a> 

Затем, если вы не возражаете против примера jQuery ..

$('a#containing_element').click(function(){ 
    var data = $(this).children('input#key').attr('value'); 
}); 

Простой, он проверяет, работает Теперь и вы можете использовать это, чтобы хранить любой вид информации, которую вы любите (даже массивы, если вы сериализации и HTMLEncode их)

Answer 5

В качестве альтернативы другой упомянутые методы, если вы хотите исключить IE6 (примерно в это время), вы можете использовать хранилище DOM (то есть объекты globalStorage, sessionStorage и localStorage), чтобы сохранить строку JSON. Эти объекты являются хранилищами ключевых значений, поэтому, если браузеры, на которые вы нацеливаете поддержку, поддерживают эту функцию (часть спецификаций HTML5), то это, вероятно, проще, чем хранение данных в произвольных элементах HTML. См. here для получения дополнительной информации.