[HTML5] Trabajando con el storage de HTML5 – Parte I

Posted on Actualizado enn


Una de las nuevas características que más me gustan de HTML5 es el storage, pero para hablar de este tema quiero hablar un poco sobre las cookies, pero no las galletas sino aquellos datos que se podían guardar en una aplicación Web en el cliente.

Los cookies permiten guardan datos en el cliente, pero tienen algunos pequeños problemas:

· Su tamaño es muy pequeño (si mal no estoy solo 100k de espacio)

· Se envían al servidor en cada petición que se realiza.

· Su creación y administración utilizando JavaScript puro es (en mi opinión) bastante cansona, claro existe un plugin de jQuery que no hace la vida muy sencilla, y lo pueden ver en este post.

Ya aclarando un poco el tema de las cookies, el storage de HTML5 llega con la idea de resolver estos problemas, y es por eso que ahora se definen dos nuevos tipos de almacenamiento:

  • localStorage
  • sessionStorage

Estos dos tipos de almacenamiento trabajan prácticamente igual, es decir las funciones para guardar, recuperar y eliminar son los mismos, la diferencia radica en que el sessionStorage funciona mientras el usuario tiene el browser abierto, y el localStorage persiste aun después de cerrar el explorador. Este tipo de storage tiene en promedio 5 Mb de almacenamiento, es almacenado en el cliente y es enviado al servidor en cada postback.

Almacenando datos:

Para poder almacenar datos utilizamos el método setItem, el cual como primer argumento define la llave a utilizar (para poderlo recuperar luego) y el valor:

   1:  window.sessionStorage.setItem('key', 'value');
   2:  window.localStorage.setItem('key', 'value');

Recuperando datos:

Para poder recuperar datos lo hacemos por medio de la llave establecida:

   1:  window.sessionStorage.getItem('key', 'value');
   2:  window.localStorage.getItem('key', 'value');

Eliminando datos:

Para eliminar un valor, también lo hacemos por medio de la llave:

   1:  window.sessionStorage.removeItem('key');
   2:  window.localStorage.removeItem('key');

Ahora para verificar que realmente este storage funciona vamos a escribir el siguiente HTML:

   1:  <h1>Storage en HTML5</h1>
   2:  <hr>
   3:  <br>
   4:  <b>Nombre:</b><input type="text" id="txtNombre">
   5:  <br>
   6:  <b>Email:</b><input type="text" id="txtEmail">
   7:  <br>
   8:  <fieldset>
   9:      <legend>Session Storage</legend>
  10:      <input type="button" id="btnGuardar" value="Guardar">
  11:      <input type="button" id="btnObtener" value="Obtener">
  12:      <input type="button" id="btnEliminarNombre" value="Eliminar nombre">
  13:  </fieldset>
  14:  <fieldset>
  15:      <legend>Local Storage</legend>
  16:      <input type="button" id="btnGuardar2" value="Guardar">
  17:      <input type="button" id="btnObtener2" value="Obtener">
  18:      <input type="button" id="btnEliminarNombre2" value="Eliminar nombre">
  19:  </fieldset>

Simplemente tenemos dos campos de texto, uno para el nombre y el otro para la dirección de email, además de botones para el sessionStorage y el localStorage. El código JavaScript sería:

   1:  $(document).on("ready", function(){
   2:      //SESSION STORAGE
   3:      $("#btnGuardar").on("click", function(){
   4:          var nombre = $("#txtNombre").val();
   5:          var email = $("#txtEmail").val();
   6:          window.sessionStorage.setItem("nombre",nombre);
   7:          window.sessionStorage.setItem("correo",email);
   8:      })
   9:      $("#btnObtener").on("click", function(){
  10:          var nombre = window.sessionStorage.getItem("nombre");
  11:          var email = window.sessionStorage.getItem("correo");            
  12:          $("#txtNombre").val(nombre);
  13:          $("#txtEmail").val(email);
  14:      })
  15:      $("#btnEliminarNombre").on("click", function(){
  16:          window.sessionStorage.removeItem("nombre");
  17:      })
  18:      //LOCAL STORAGE
  19:      $("#btnGuardar2").on("click", function(){
  20:          var nombre = $("#txtNombre").val();
  21:          var email = $("#txtEmail").val();                
  22:          window.localStorage.setItem("nombre",nombre);
  23:          window.localStorage.setItem("correo",email);
  24:      })
  25:      $("#btnObtener2").on("click", function(){
  26:          var nombre = window.localStorage.getItem("nombre");
  27:          var email = window.localStorage.getItem("correo");    
  28:          $("#txtNombre").val(nombre);
  29:          $("#txtEmail").val(email);
  30:      })
  31:      $("#btnEliminarNombre2").on("click", function(){
  32:          window.localStorage.removeItem("nombre");
  33:      })
  34:  })

Ahora, para ver que realmente si esta guardando datos voy a utilizar las herramientas de Chrome (con F12 se muestra) y dentro de Resources esta la opción de Local Storage y de Session Storage, y allí podremos ver los datos guardados, como en la siguiente imagen:

storage

Como se puede observar realmente es muy sencillo, en el próximo post vamos a revisar como poder almacenar datos el formato JSON, como siempre les dejo el ejemplo para que lo descarguen:

Descargar ejemplo!

3 comentarios sobre “[HTML5] Trabajando con el storage de HTML5 – Parte I

    […] [HTML5] Trabajando con el storage de HTML5 – Parte I […]

    nathan escribió:
    04/21/2012 en 08:53

    Reblogged this on Nathan.

    Resumen Post 2012 « Todo en ASP.NET escribió:
    12/19/2012 en 22:04

    […] [HTML5] Trabajando con el storage de HTML5 – Parte I […]

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s