it-swarm.com.de

Speichern und Abrufen von Javascript-Arrays in und aus HTML5-Datenattributen

Wie kann ein Javascript Array in einem HTML5 data-Attribut gespeichert werden?

Ich habe alle Variationen von JSON.stringify - und Escapezeichen ausprobiert.

Was ist die genaue Methode, um das Array zu speichern und erneut abzurufen?

Anmerkung

Ich baue das Array mit [ $("#firstSelectedElement").val(), $("#secondSelectedElement").val() ]. Ich rufe id="storageElement" data-storeIt="stuff" Mit $("#storageElement").data('storeit') ab.

Ich kann niemals scheinen, die Daten als ein wahres Array, nur ein Array von Zeichen abzurufen.

54
user1382306

Es stellte sich heraus, dass Sie die mit HTML-Escapezeichen versehenen Zeichen im Attribut element data verwenden könnten, um ein json-ähnliches Array zu erhalten (in Anführungszeichen):

<div id="demo" data-stuff='[&#34;some&#34;, &#34;string&#34;, &#34;here&#34;]'></div>

Und dann in Javascript bekommen Sie es ohne zusätzliche Magie:

var ar = $('#demo').data('stuff');

Überprüfen Sie diese Geige aus.

Bearbeitet (2017)
Sie müssen keine mit HTML-Escapezeichen versehenen Zeichen im data-Attribut verwenden.

<div id="demo" data-stuff='["some", "string", "here"]'></div>

Überprüfen Sie diese neue Geige aus.

65
iurii

Dies hängt davon ab, welche Art von Daten Sie im Array speichern. Wenn es nur Strings sind (wie es scheint) und Sie ein Zeichen haben, das Sie wissen niemals Teil Ihrer Daten sein werden (wie das Komma in meinem Beispiel unten), würde ich die JSON-Serialisierung vergessen und benutze einfach string.split:

<div id="storageElement" data-storeIt="stuff,more stuff"></div>

Dann beim Abrufen:

var storedArray = $("#storageElement").data("storeIt").split(",");

Es wird ein bisschen besser als mit JSON umgehen. Es verwendet weniger Zeichen und ist weniger "teuer" als JSON.parse.

Wenn Sie dies jedoch tun müssen, sieht Ihre JSON-Implementierung folgendermaßen aus:

<div id="storageElement" data-storeIt='["hello","world"]'></div>

Und um abzurufen:

var storedArray = JSON.parse($("#storageElement").data("storeIt"));

Beachten Sie, dass wir in diesem Beispiel Semi-Anführungszeichen (') um den data-storeIt Eigentum. Dies liegt daran, dass die JSON-Syntax die Zeichenfolgen in ihren Daten in Anführungszeichen setzt.

46
Grinn

Das HTML5-Datenattribut kann nur Zeichenfolgen speichern. Wenn Sie also ein Array speichern möchten, müssen Sie es serialisieren. JSON wird funktionieren und es sieht so aus, als wären Sie auf dem richtigen Weg. Sie müssen nur JSON.parse() verwenden, wenn Sie die serialisierten Daten abgerufen haben:

var retrieved_string = $("#storageElement").data('storeit');
var retrieved_array = JSON.parse(retrieved_string);

Wenn Sie die API-Dokumentation lesen, sollte jQuery versuchen, eine JSON-codierte Zeichenfolge automatisch zu konvertieren, sofern sie ordnungsgemäß codiert ist. Können Sie ein Beispiel für den Wert geben, den Sie speichern?

Beachten Sie auch, dass das HTML5-Datenattribut und die Methoden jQuery .data() zwei verschiedene Dinge sind. Sie interagieren, aber jQuery ist leistungsfähiger und kann jeden Datentyp speichern. Sie können ein Javascript-Array auch direkt mit jQuery speichern, ohne es zu serialisieren. Wenn Sie es jedoch als HTML5-Datenattribut im Markup selbst haben müssen, sind Sie nur auf Zeichenfolgen beschränkt.

4
nullability

Für den Datensatz hat es bei mir nicht mit codierten Entitäten funktioniert, aber um als Objekt analysiert zu werden, scheint das Datenattribut muss ein wohlgeformtes JSON-Objekt sein.

So konnte ich ein Objekt verwenden mit:

data-myarray="{&quot;key&quot;: &quot;value&quot;}"

oder verwenden Sie einfach einfache Anführungszeichen:

data-myobject='{"key1": "value1", "key2": value2}'

Zeit, Spaß zu haben! : D

3
Mateo Tibaquira

Sie können jedes Objekt wie folgt in Node speichern:

$('#storageElement').data('my-array', ['a', 'b', 'c']);

var myArray = $('#storageElement').data('my-array');
1
kayz1