javascript - libro - html5 pdf 2017

almacenar y recuperar matrices de JavaScript en y desde atributos de datos HTML5

Question

¿Cómo se puede almacenar una Array JavaScript en un atributo de data HTML5?

JSON.stringify todas las variaciones del catión JSON.stringify y los caracteres que escapan.

¿Cuál es el método preciso para almacenar la matriz y recuperarla de nuevo?

Nota

Construyo la matriz con [ $("#firstSelectedElement").val(), $("#secondSelectedElement").val() ] . id="storageElement" data-storeIt="stuff" con $("#storageElement").data(''storeit'') .

Parece que nunca puedo recuperar los datos como una verdadera Array , solo una Array de caracteres.

Answer 1

Depende del tipo de datos que está almacenando en la matriz. Si solo son cadenas (como parece) y tienes un personaje que sabes que nunca será parte de tus datos (como la coma en mi ejemplo a continuación), entonces me olvidaría de la serialización JSON y simplemente usar string.split:

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

Luego, al recuperar:

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

Se manejará un poco mejor que usar JSON. Utiliza menos caracteres y es menos "caro" que JSON.parse .

Pero, si es necesario, su implementación JSON se vería así:

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

Y para recuperar:

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

Tenga en cuenta que en este ejemplo tuvimos que usar comillas ( '' ) alrededor de la propiedad data-storeIt . Esto se debe a que la sintaxis de JSON requiere que usemos comillas alrededor de las cadenas en sus datos.

Answer 2

El atributo de datos HTML5 solo puede almacenar cadenas, por lo que si desea almacenar una matriz, deberá serializarla. JSON funcionará y parece que estás en el camino correcto. Solo necesita usar JSON.parse() una vez que recupere los datos serializados:

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

Al revisar la documentación de la API , jQuery debe intentar convertir automáticamente una cadena codificada JSON siempre que esté codificada correctamente. ¿Puedes dar un ejemplo del valor que estás almacenando?

También tenga en cuenta que el atributo de datos HTML5 y los métodos jQuery .data() son dos cosas distintas. Interactúan, pero jQuery es más poderoso y puede almacenar cualquier tipo de datos. Podrías simplemente almacenar una matriz javascript directamente usando jQuery sin serializarla. Pero si necesita tenerlo en el marcado como un atributo de datos HTML5, entonces está limitado solo a cadenas.

Answer 3

Para el registro, no funcionó con entidades codificadas para mí, pero parece que para poder analizarse como un objeto, el atributo de datos debe ser un objeto JSON bien formado .

Así que pude usar un objeto con:

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

o tal vez solo use comillas simples:

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

¡Tiempo de divertirse! :RE

Answer 4

Puede almacenar cualquier objeto en un nodo como ese:

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

Answer 5

Resultó que podía usar los caracteres escapados html en el atributo de data del elemento para tener una matriz json-like (codificados son comillas):

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

Y luego en javascript obténgalo sin ninguna magia adicional:

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

Mira este fiddle .

Editado (2017)
No necesita usar caracteres escapados html en el atributo de data .

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

Mira este nuevo fiddle .