Przechowywanie i pobieranie tablic JavaScript do iz atrybutów danych HTML5

Question

W jaki sposób można zapisać javascript Array w atrybucie HTML5 data?

Próbowałem każdej odmianykationów i znaków ucieczkowych.

Jaka jest dokładna metoda przechowywania tablicy i ponownego jej pobrania?

uwaga

zbudować tablicę z [ $("#firstSelectedElement").val(), $("#secondSelectedElement").val() ]. Pobieram id="storageElement" data-storeIt="stuff" z $("#storageElement").data('storeit').

Nigdy nie uda mi się odzyskać danych jako prawdziwe Array, a jedynie Array znaków.

Answer 1

Okazało się, że można użyć html uciekł znaków w elemencie data atrybutu mieć JSON jak array (zakodowane są cytaty):

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

A potem w javascript dostać bez dodatkowej magii:

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

Sprawdź to fiddle.

Edited (2017)
Nie trzeba używać HTML uciekł znaków w atrybucie data.

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

Sprawdź to nowe fiddle na zewnątrz.

Answer 2

Atrybut danych HTML5 może przechowywać tylko ciągi, więc jeśli chcesz przechowywać tablicę, musisz ją serializować. JSON będzie działał i wygląda na to, że jesteś na dobrej drodze. Wystarczy użyć JSON.parse() gdy odzyskać dane odcinkach:

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

Przegląd api documentation, jQuery powinien starać się automatycznie konwertować JSON zakodowany ciąg pod warunkiem, że jest prawidłowo zakodowany. Czy możesz podać przykład wartości, którą przechowujesz?

Należy również zauważyć, że atrybuty danych HTML5 i jQuery .data() to dwie różne rzeczy. Oddziałują, ale jQuery jest potężniejszy i może przechowywać dowolny typ danych. Możesz po prostu przechowywać tablicę javascript bezpośrednio używając jQuery bez serializacji. Ale jeśli potrzebujesz go w samym znaczniku jako atrybutu danych HTML5, jesteś ograniczony tylko do ciągów.

Answer 3

To zależy od rodzaju danych przechowywanych w tablicy. Jeśli są to tylko ciągi znaków (jak się wydaje) i masz postać, która nigdy nie będzie częścią twoich danych (jak przecinek w moim przykładzie poniżej), wtedy zapomnę o serializacji JSON i po prostu użyję łańcucha. Podział:

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

Następnie podczas pobierania:

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

będzie obsługiwać nieco lepiej niż przy użyciu JSON. Używa mniej znaków i jest mniej "kosztowny" niż JSON.parse.

Ale jeśli trzeba, implementacja JSON będzie wyglądać mniej więcej tak:

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

I do pobierania:

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

zauważyć, że w tym przypadku mieliśmy do zastosowań półprofesjonalnych cytaty (') wokół właściwości data-storeIt. Dzieje się tak dlatego, że składnia JSON wymaga od nas stosowania cudzysłowów w łańcuchach danych.

Answer 4

można przechowywać dowolny obiekt do węzła tak:

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

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

Answer 5

Dla rekordu nie działał on dla mnie z zakodowanymi elementami, ale wydaje się, że aby analizować obiekt jako obiekt, atrybut danych musi być dobrze utworzonym obiektem JSON.

Więc udało mi się użyć obiektu z:

data-myarray="{"key": "value"}" 

a może po prostu użyć apostrofów:

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

czas na zabawę! : D