Cada vez tenemos más aplicaciones móviles y entre ellas destacan de forma clara las aplicaciones realizadas con HTML5 ya que estas nos permiten construir el mismo aplicativo para varias plataformas a la vez.
HTML5 y soporte
Lamentablemente el soporte de las diferentes características que tiene HTML 5 es cuando menos heterogéneo entre los diferentes navegadores. Algunas características están ampliamente soportadas y otras no tanto. Para echar un vistazo a ellas podemos usar la web caniuse.com que informara del soporte que tiene cada una de las características.
Una de las características más habituales es el uso de LocalStorage y SessionStorage que nos permiten almacenar información de caracter local y sencilla en el navegador para su posterior uso :
localStorage["nombre"]="Pedro";
En este caso estamos usando la variable nombre y almacenando "Pedro" en ella. Al usar este tipo de almacén los datos se guardan a nivel local del navegador. Podemos verlos almacenados apoyándonos en las herramientas de desarrollo.
HTML5 LocalStorage Eventos
Una de las características menos conocida de LocalStorage/SessionStorage es su capacidad para emitir eventos cada vez que los datos almacenados son modificados por alguna de las páginas con las que estamos trabajando.
Vamos a verlo en acción con un bloque de código que almacena un dato en el localStorage y luego lo modifica.
<html>
<head>
</head>
<body>
<input type="button" id="crearPersona" value="crearPersona"/>
<input type="button" id="cambiarPersona" value="cambiarPersona"/>
</body>
</html>
Como podemos ver el código es pequeño y simplemente usa dos botones que están enlazados vía jQuery para crear un dato en el almacén y luego modificarle.
Así pues cuando pulsemos el botón de cambiarPersona actualizaremos los datos del almacén. Hecho esto necesitaremos que todas las demas páginas se percaten de estos cambios.
Storage Event
Para ello usaremos una nueva página y el evento "storage" que recibirá la información de los cambios que se han producido en el almacén.
<html>
<head>
</head>
<body>
</body>
</html>
Podemos ver como esta nueva página recoge los cambios en la consola:
LocalStorage y Session Storage son dos de los conceptos que nos serán más útiles cuando desarrollemos aplicaciones orientadas a móviles.
En GenBetaDev:Introducción a HTML5
