Publicidad

HTML5 LocalStorage y eventos

HTML5 LocalStorage y eventos
Sin comentarios

Publicidad

Publicidad

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

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.

Storageimagen

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.

Eventos

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>
<script src="jquery-1.11.1.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function() {


$("#crearPersona").click(function() {

localStorage["nombre"]="pedro";

});

$("#cambiarPersona").click(function() {
localStorage["nombre"]="juan";

});
});
</script>
</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.

Pagina

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>
<script src="jquery-1.11.1.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function() {
 $(window).bind('storage', function (e) {


     console.log("cambio" +e.originalEvent.key, e.originalEvent.newValue);
 });


});

</script>
</head>
<body>
</body>
</html>

Podemos ver como esta nueva página recoge los cambios en la consola:

Eventogestionado

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

Temas

Publicidad

Comentarios cerrados

Publicidad

Publicidad

Inicio
Compartir