Beliebige Daten in HTML abspeichern

Question

Wie lassen sich Daten am besten in HTML-Elemente zur späteren Verwendung einbetten?

Nehmen wir zum Beispiel an, dass jQuery einige JSON-Daten vom Server zurückgibt und wir diese Daten als Absätze an den Benutzer weitergeben wollen. Wir möchten jedoch in der Lage sein, Metadaten an diese Elemente anzuhängen, so dass wir Ereignisse für diese später können.

Ich handhabe das in der Regel so, dass ich ein paar hässliche Präfixe einfüge

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));
    });
}

Alternativ kann man auch ein Formular in den Absatz einbauen und dort die Metadaten speichern. Aber das fühlt sich oft wie Overkill an.

Diese Frage wurde schon einmal auf verschiedene Weise gestellt, aber ich habe das Gefühl, dass sie nicht gut beantwortet wurde:

• Wie man beliebige Daten für einige HTML-Tags speichert
• Nicht-Standard-Attribute für HTML-Tags. Eine gute Sache? Schlechte Sache? Was denken Sie darüber?

Answer 1

HTML5 unterstützt jetzt die data-name Syntax für die Speicherung beliebiger Daten ohne nicht standardisierte benutzerdefinierte Attribute

Dies wird natürlich brechen Validierung, wenn Ihr Doctype ist etwas anderes als HTML5 (obwohl es Möglichkeiten gibt, dies zu umgehen), aber es wird nicht das Rendering oder Parsing in allen Browsern, die ich gekommen bin, zu beeinflussen.

Hier ist ein ausgezeichneter Artikel von John Resig zu diesem Thema

Answer 2

In der Annahme, dass Sie auf der Seite bleiben...

jQuery verfügt über eine Datenfunktion, mit der Sie Daten zu einem Element nach Schlüssel speichern können.

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

Verwenden Sie die folgende Syntax, um die Daten abzurufen:

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

Wenn Sie nicht wissen, welches Element Sie verwenden sollen, verwenden Sie einfach $(document)

Answer 3

Eine Methode, die ich häufig verwende (anstelle der Datenfunktionen von HTML5), ist die Verwendung von versteckten Eingabe-Tags, z. B.

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

Dann, wenn Sie nichts gegen ein jQuery-Beispiel haben

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

Einfach, validiert, funktioniert jetzt und Sie können dies verwenden, um jede Art von Information zu speichern (sogar Arrays, wenn Sie sie serialisieren und htmlencode)

Answer 4

Je nachdem, wofür die Metadaten bestimmt sind, können Sie den Absätzen Klassen hinzufügen:

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

Dies sollte sich nicht negativ auf das Styling Ihrer Seite auswirken, es sei denn, es kommt zu Kollisionen zwischen den Metadaten und bestehenden CSS-Klassen.

Answer 5

Als Alternative zu den anderen genannten Methoden können Sie, wenn Sie bereit sind, den IE6 auszuschließen (es ist an der Zeit), die DOM-Speicherung (d. h. die globalStorage , sessionStorage y localStorage Objekte), um Ihre JSON-Zeichenfolge zu speichern. Diese Objekte sind Key-Value-Speicher. Wenn die Browser, auf die Sie abzielen, diese Funktion unterstützen (Teil der HTML5-Spezifikationen), ist dies wahrscheinlich einfacher als die Speicherung von Daten in beliebigen HTML-Elementen. Siehe aquí für weitere Informationen.