2011-11-19 13 views
5

En nuestro proyecto ambos utilizamos inputtype=hidden elementos y divs con display:none css para almacenar algunos datos en la página html sin mostrarlo al usuario.entrada oculta o div con pantalla: ninguna css?

Entonces, me pregunto qué camino es más adecuado tanto en la integridad del código de rendimiento y la semántica html?

+0

¿Puede entrar en más detalles sobre cómo se utiliza esta información dónde viene? –

Respuesta

4

La entrada oculta se ocultará independientemente de las reglas de diseño del documento (CSS), esto puede mejorar el rendimiento, pero no tengo los datos para mostrarlo. Una vez dicho esto, los controles de entrada deben enviarse como parte de un formulario.

hay otros métodos, así como los atributos de datos personalizados HTML5 o usando una etiqueta de script:

<!-- Custom data attribute --> 
<div id="product" data-id="42"> 
    <h1>Product name</h1> 
</div> 

<!-- JSON data embedded in a script tag --> 
<script type="application/json"> 
    { "id": 42 } 
</script> 
1

Creo que la primera solución (con input type = hidden) es más bonita, porque la segunda solución depende de css, que puede deshabilitarse en el navegador y sus datos se mostrarán al usuario.

1

La semántica dicta que la respuesta es, depende de cómo la use.

Si los datos deben enviarse como un formulario o están estrechamente relacionados con un formulario, utilice la entrada. No estoy seguro de qué situaciones no caen en esa categoría, ya que los datos que solo se usan en una página se pueden almacenar en una variable de JavaScript si el usuario no debe verla.

+0

por ejemplo, muestra una lista de personas y desea ocultar sus identificaciones del usuario, pero se necesita en un evento de clic. – LostMohican

+0

¿Ha considerado usar un atributo? Por ejemplo id = "person123" o rel = "123"? –

+0

Parece que esto debe actualizarse para mencionar el atributo de datos html5. Es una manera muy fácil de almacenar y extraer información mediante javascript o una brisa con jquery. No pude encontrar un ejemplo conciso para vincular, pero si busca en Google algunos artículos, puede reconstruir rápidamente cómo funciona. –

2

Hay muchos factores que intervienen en el rendimiento. Pero a menos que almacene una tonelada de datos, las diferencias de rendimiento probablemente no se puedan distinguir.

Lo mejor para la integridad del código y la semántica depende de los datos y de cómo se usa.

hay muchas opciones para el almacenamiento de datos:

  • Almacenamiento de datos en un campo oculto que es ideal para su uso con las formas:

    < input name = tipo "misdatos" = "ocultos "value =" algunos datos"/>

  • almacenar datos en una etiquetas hTML ocultos que a menudo es mal visto por los motores de búsqueda debido a su abuso en el intento de mejorar el ranking SEO:

    < div id = estilo "misdatos" = "display: none"> algunos datos </div>

  • El almacenamiento de datos en javascript que es ideal para un acceso fácil y rápido:

    < script type = "text/javascript"> var data.id = 123; var datos.list = ["Sí", "No", "Quizás"]; </script>

    < meta name = contenido "misdatos" = "algunos datos"/>

    • Almacenar datos en una cookie el que el tiempo que las cookies no se han desactivado esta opción permite a los datos e xpire:

    http://www.w3schools.com/js/js_cookies.asp

    • HTML5 tiene una base de datos SQLite :

    http://html5doctor.com/introducing-web-sql-databases/

    • especificaciones de HTML5 permite atributos personalizados de datos

    http://html5doctor.com/html5-custom-data-attributes/

Cuestiones relacionadas