Как хранить произвольные данные для некоторых HTML-тэгов

В моем предыдущем работодателе мы использовали пользовательские HTML-тэги все время для содержания информации об элементах формы. Выгода: Мы знали, что пользователь был вынужден использовать IE.

Это не работало хорошо на FireFox в то время. Я не знаю, изменил ли FireFox это или нет, но знать, что добавление Ваших собственных атрибутов к элементам HTML может, или может - не поддерживаться браузером Вашего читателя.

, Если можно управлять, который браузер читатель использует (т.е. внутренний веб-апплет для корпорации), затем любой ценой, попробуйте его. Что это может повредить, правильно?

Пока Вы - фактическая работа, сделанная серверная сторона, почему Вам была бы нужна пользовательская информация в тегах HTML в выводе так или иначе? все, что необходимо знать назад на сервере, является индексом в любой вид списка структур с пользовательской информацией. Я думаю, что Вы надеетесь хранить информацию в неправильном месте.

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

Много лет спустя:

Этот вопрос был отправлен примерно за три года, до этого data-... атрибуты стали допустимой опцией с появлением html 5, таким образом, истина сместилась, и исходный ответ, который я дал, больше не релевантен. Теперь я предложил бы использовать атрибуты данных вместо этого.

<a data-articleId="5" href="link/for/non-js-users.html">

<script>
    let anchors = document.getElementsByTagName('a');
    for (let anchor of anchors) {
        let articleId = anchor.dataset.articleId;
    }
</script>

Одна возможность могла бы быть:

• Создают новое отделение для содержания всех расширенных/произвольных данных
• , Делают что-то, чтобы гарантировать, что это отделение невидимо (например, CSS плюс атрибут класса отделения)
• Помещенный расширенные/произвольные данные в [X] HTML-тэги (например, как текст в ячейках таблицы или чего-либо еще, что Вы могли бы любить) в этом невидимом отделении

Уже почему бы не использовать значимые данные там, вместо того, чтобы добавить произвольные данные?

т.е. использование <a href="/articles/5/page-title" class="article-link">, и затем можно программно получить все ссылки на статью на странице (через имя класса) и статья ID (соответствие regex /articles\/(\d+)/ против this.href).

Я знаю, что Вы в настоящее время используете jQuery, но что при определении onclick встроенного обработчика. Тогда Вы могли сделать:

 <a href='/link/for/non-js-users.htm' onclick='loadContent(5);return false;'>
     Article 5</a>

Взлом это собирается работать с в значительной степени каждым возможным браузером, должен использовать открытые классы как это: <a class='data\_articleid\_5' href="link/for/non-js-users.html>;

Это не все, что изящный пуристам, но это универсально поддерживается, стандартно-совместимо, и очень легкое управлять. Это действительно походит на самый лучший метод. Если Вы serialize, измените , копия Ваши теги, или сделаете в значительной степени, то что-либо еще, data останется приложенным, скопированным и т.д.

, единственная проблема состоит в том, что Вы не можете хранить несериализуемые объекты тот путь , и могли бы быть пределы при помещении чего-то действительно огромного там.

А второй путь состоит в том, чтобы использовать поддельные атрибуты как: <a articleid='5' href="link/for/non-js-users.html">

Это более изящно, но повреждает стандарт, и я не на 100% уверен в поддержке. Много браузеров поддерживают его полностью, я думаю поддержки IE6 JS доступ для него, но не CSS selectors (который действительно не имеет значения здесь), возможно, некоторые браузеры будут полностью перепутаны, необходимо проверить его.

Выполнение забавных вещей как сериализация и десериализация было бы еще более опасным.

Используя ids к чистому JS хеш главным образом работает, кроме тех случаев, когда Вы пытаетесь скопировать свои теги. Если Вы будете иметь tag <a href="..." id="link0">, скопируете его с помощью стандарта JS методы, и затем попытаетесь изменить data присоединенный ко всего одной копии, другая копия будет изменена.

Это не проблема, если Вы не копируете tag с или использование только для чтения данные. Если Вы скопируете tag с, и они изменяются, то необходимо будет обработать это вручную.

Произвольные атрибуты не допустимы, но совершенно надежны в современных браузерах. При установке свойств с помощью JavaScript, чем Вы не должны волноваться о проверке также.

альтернатива должна установить атрибуты в JavaScript. jQuery имеет хороший служебный метод просто с этой целью, или Вы можете самокрутка.

Просто иначе я лично не использовал бы это, но это работает (гарантируйте, что Ваш JSON допустим, потому что оценка () опасна).

<a class="article" href="link/for/non-js-users.html">
    <span style="display: none;">{"id": 1, "title":"Something"}</span>
    Text of Link
</a>

// javascript
var article = document.getElementsByClassName("article")[0];
var data = eval(article.childNodes[0].innerHTML);

При использовании jQuery уже затем, необходимо усилить метод "данных", который является рекомендуемым методом для того, чтобы хранить произвольные данные на dom элементе с jQuery.

Для хранения чего-то:

$('#myElId').data('nameYourData', { foo: 'bar' });

Для получения данных:

var myData = $('#myElId').data('nameYourData');

, Который является всем, что существует к нему, но смотрят на документация jQuery для большего количества информации/примеров

Как пользователь jQuery я бы использовал плагин метаданных . HTML выглядит чистым, он проверяется, и вы можете встроить все, что можно описать с помощью нотации JSON.

Я рекомендую использовать атрибут rel. XHTML выполняет проверку, сам атрибут используется редко, а данные извлекаются эффективно.

Таким образом, для этого должно быть четыре варианта:

1. Поместить данные в атрибут id.
2. Поместите данные в произвольный атрибут
3. Поместите данные в атрибут класса
4. Поместите данные в другой тег

http://www.shanison.com/?p=321