javascript - tipos - para qué sirve el elemento data-* en html

La mejor forma de almacenar JSON en un atributo HTML?

Question

Necesito poner un objeto JSON en un atributo en un elemento HTML.

1. El HTML no tiene que validar.

   Respondido por Quentin: Almacene el JSON en un atributo data-* , que es HTML5 válido.

2. El objeto JSON podría ser de cualquier tamaño, es decir, enorme

   Respondido por Maiku Mori: El límite para un atributo HTML es potencialmente 65536 caracteres .

3. ¿Qué pasa si el JSON contiene caracteres especiales? por ejemplo, {foo: ''<"bar/>''}

   Respondido por Quentin: Codifique la cadena JSON antes de ponerla en el atributo, según las convenciones usuales. Para PHP, use la función htmlentities() .

EDITAR - Solución de ejemplo usando PHP y jQuery

Escribir el JSON en el atributo HTML:

<?php
    $data = array(
        ''1'' => ''test'',
        ''foo'' => ''<"bar/>''
    );
    $json = json_encode($data);
?>

<a href="#" data-json="<?php echo htmlentities($json, ENT_QUOTES, ''UTF-8''); ?>">CLICK ME</a>

Recuperando el JSON usando jQuery:

$(''a'').click(function() {

    // Read the contents of the attribute (returns a string)
    var data = $(this).data(''json'');

    // Parse the string back into a proper JSON object
    var json = $.parseJSON($(this).data(''json''));

    // Object now available
    console.log(json.foo);

});

Answer 1

El HTML no tiene que validar.

Por qué no? La validación es un control de calidad muy fácil que atrapa muchos errores. Use un atributo HTML 5 data-* .

El objeto JSON podría ser de cualquier tamaño (es decir, enorme).

No he visto ninguna documentación sobre los límites del navegador para los tamaños de los atributos.

Si se encuentra con ellos, entonces almacene los datos en un <script> . Defina un objeto y identidades de elemento de mapa a los nombres de propiedad en ese objeto.

¿Qué pasa si el JSON contiene caracteres especiales? (por ejemplo, {test: ''<"myString />''})

Simplemente siga las reglas normales para incluir datos no confiables en los valores de los atributos. Use & y " (si está ajustando el valor del atributo entre comillas dobles) o ' (si está ajustando el valor del atributo en comillas simples).

Sin embargo, tenga en cuenta que eso no es JSON (que requiere que los nombres de propiedad sean cadenas y cadenas estén delimitados solo con comillas dobles).

Answer 2

Dependiendo de donde lo pones,

• En un <div> como usted solicitó, debe asegurarse de que el JSON no contenga especiales HTML que puedan iniciar una etiqueta, comentario HTML, doctype incrustado, etc. Debe escapar al menos < , y & de tal manera que el personaje original no aparece en la secuencia escapada.
• En los elementos <script> debe asegurarse de que el JSON no contenga una etiqueta final </script> ni un límite de texto escapado: <!-- o --> .
• En los controladores de eventos, debe asegurarse de que el JSON conserva su significado incluso si tiene elementos que parecen entidades HTML y no rompe los límites de los atributos ( " o '' ).

Para los dos primeros casos (y para los analizadores JSON antiguos), debe codificar U + 2028 y U + 2029, ya que estos son caracteres de nueva línea en JavaScript, aunque están permitidos en cadenas no codificadas en JSON.

Para ser correcto, necesitas escapar los caracteres de comillas / y JSON y nunca es una mala idea codificar siempre NUL.

Si el HTML se puede servir sin una codificación de contenido, debe codificar + para prevenir ataques UTF-7 .

En cualquier caso, la siguiente tabla de escape funcionará:

• NUL -> /u0000
• CR -> /n o /u000a
• LF -> /r o /u000d
• " -> /u0022
• & -> /u0026
• '' -> /u0027
• + -> /u002b
• / -> // o /u002f
• < -> /u003c
• > -> /u003e
• / -> // o /u005c
• U+2028 -> /u2028
• U + 2029 -> /u2029

Entonces, el valor de la cadena JSON para el texto Hello, <World>! con una nueva línea al final sería "Hello, /u003cWorld/u003e!/r/n" .

Answer 3

Lo que puedes hacer es usar cdata alrededor de tu / s elemento / s como este

<![CDATA[  <div class=''log'' mydata=''${aL.logData}''>${aL.logMessage}</div>     ]]>  

donde mydata es una cadena de json sin procesar. Espero que esto te ayude a ti y a los demás.

Answer 4

Nada elegante aquí. Desde PHP, ejecute la cadena JSON a través de htmlspecialchars para asegurarse de que ningún carácter especial pueda interpretarse como HTML. Desde Javascript, no es necesario escapar; simplemente establece el atributo y estás listo para ir.

Answer 5

Otra forma de hacerlo es colocar datos json dentro de la etiqueta <script> , pero no con type="text/javascript" , pero con type="text/bootstrap" o type="text/json" type, para evitar javascript ejecución.

Luego, en algún lugar de su programa, puede solicitarlo de esta manera:

function getData(key) {
  try {
    return JSON.parse($(''script[type="text/json"]#'' + key).text());
  } catch (err) { // if we have not valid json or dont have it
    return null;
  } 
}

Del lado del servidor, puedes hacer algo como esto (este ejemplo con php y twig ):

<script id="my_model" type="text/json">
  {{ my_model|json_encode()|raw }}
</script>

Answer 6

Otra opción es codificar base64 la cadena JSON y si necesita usarla en su javascript atob() con la función atob() .

var data = JSON.parse(atob(base64EncodedJSON));

Answer 7

Puedes usar knockoutjs,

<p>First name: <strong data-bind="text: firstName" >todo</strong></p>
<p>Last name: <strong data-bind="text: lastName">todo</strong></p>

knockout.js

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
    this.firstName = "Jayson";
    this.lastName = "Monterroso";
}

// Activates knockout.js
ko.applyBindings(new AppViewModel());

Salida

Nombre: Jayson Apellido: Monterroso

Mira esto: http://learn.knockoutjs.com/