Ir al contenido principal

HTML5: LOCALSTORAGE VS SESSIONSTORAGE

HTML5 está muy de moda. Muchas ofertas de empleo tienen como requisito indispensable conocer HTML5 para el desarrollo del front-end de aplicaciones. Muchas navegadores soportan en mayor o menor grado sus características: nuevas etiquetas, nuevos componentes para formularios, soporte para drag&drop nativo, geolocalización, soporte para contenido multimedia, web workers, web sockets, almacenamiento local... Es de esto último de lo que hablaremos en el post, explicando para que sirve, los tipos de almacenamiento local y un ejemplo de uso.


Cookies 2.0. Almacenamiento de datos en cliente.

Las aplicaciones web han utilizado las cookies para almacenar datos de cliente en el navegador. Pero éstas contaban con una serie de problemas:

  • Las cookies se mandaban con la petición HTTP una y otra vez, lo que hacia la comunicación cliente-servidor más lenta además de que siempre no era necesario.
  • Suponían un problema de seguridad si nuestra aplicación no corría sobre protocolos seguros como SSL.
  • La limitación de almacenamiento de datos, sólo podíamos guardar 4KB lo que a veces podía ser insuficiente.

Con el almacenamiento local de HTML5 que algunos llaman Cookies 2.0 superamos todas estas limitaciones:

  • Posibilidad de almacenar gran cantidad de datos (normalmente 5MB), lo que nos permite trabajar con una aplicación web como si fuera una aplicación de escritorio offline.
  • No se transmite con cada petición HTTP al servidor.


Tipos de almacenamiento local


Hay dos tipos de almacenamiento local que implementan la interface Storage: Local Storage y Session Storage

Los dos son métodos accesibles desde el objeto window. La diferencia es que Session Storage actúa sobre la sesión de un cliente, por lo que cuando el usuario cierra la ventana del navegador desaparecen los datos guardados. Con Local Storage los datos persisten aunque se cierre la ventana del navegador.

La interfaz Storage define una serie de atributos y métodos con los que se pueden guardar, borrar y recuperar datos:

  • getItem(key): devuelve un string con el valor del elemento con clave key.
  • setItem(key, value): almacena un valor (value) referenciado por una clave (key).
  • removeItem(key): elimina el par clave/valor con clave igual a key.
  • length: atributo que contiene el número de elementos (pares clave/valor) almacenados.
  • key(index): devuelve un string con la clave (no el valor) del elemento que ocupe la posición index dentro de la colección de datos.
  • clear(): elimina todos los elementos.
Además podemos registrar un listener (storage) para saber cuando se ha modificado el valor de una clave y realizar una acción al respecto.

Ejemplo de uso.

He hecho un página HTML en la que se pueden ver las diferencias entre el local storage y el session storage y su uso trivial. Para comprobar que tu navegador tiene compatibilidad con Local Storage y Session Storage utilizamos la siguiente función:


function compruebaCompatibilidad() {
  if (window.sessionStorage && window.localStorage) {
   alert('Tu navegador acepta almacenamiento local');
  } else {
   alert('Lo siento, pero tu navegador no acepta almacenamiento local');
  }
 }

Para obtener un valor del Local Storage se utiliza el siguiente código:


localStorage.getItem('DATOL')




Para establecer un valor en el Local Storage se utiliza el siguiente código:


 localStorage.setItem("DATOL",  $("#valueL").val());

Para borrar todos los datos del Local Storage se utiliza el siguiente código:


localStorage.clear();

Para borrar un dato del Local Storage se utiliza el siguiente código:


localStorage.removeItem("DATOL");

El código completo lo podéis descargar aquí.

En el ejemplo podemos almacenar el valor de una variable en el Local Storage (DATOL) y en la Session Storage (DATOS). También podemos comprobar la compatibilidad con nuestro navegador y borrar todas las variables almacenadas en el Local Storage y en el Session Storage.


Con Google Chrome (imagino que también con otros navegadores) podemos ver el contenido del Local Storage y Session Storage si pulsamos Herramientas > Consola Javascript > Resources:


Si guardamos un valor en el Local Storage y otro en el Session Storage y cerramos nuestra ventana en el navegador cuando la abramos de nuevo sólo aparecerá la variable del Local Storage (en la ventana de ejemplo se recargan las variables si existen en cada uno de los Storage).

Espero que os haya servido.

Salu2.

Comentarios

Entradas populares de este blog

Soluciones Alchemy Classic 389 elementos

Hace algún tiempo salió una actualización del Juego Alchemy Classic en la que aparecían más elementos (389 en lugar de 238). Aparte de añadir elementos mejoran algunas traducciones en castellano y mejoran la interfaz, aunque todavía hay algún error en algunos nombres de elementos.

Aquí os dejo las soluciones para los que estén atascados y no puedan dormir por las noches:


Sustancia primaria
Aire=Elemento primario  Fuego=Elemento primario  Agua=Elemento primario  Tierra=Sustancia Primaria Arena=Piedra + Aire Piedra=Tierra + Fuego Arcilla=Arena + Pantano Caliza=Tierra + Amonitas Carbono=Fuego + Madera Cloro=Fuego + Sal + Electricidad CO2(Dióxido de Carbono)=Ceniza + Ácido nítrico Electricidad=Relámpago+ Metales Gas natural= Yacimiento de gas + Pozo Helio=Refinería de gas + Gas Natural Hidrógeno=Electricidad + Agua Hielo=Frío + Agua Imán=Piedra + Metales Metano=Deshechos Vegetales + Pantano Oxígeno=Electricidad + Agua Petróleo=Unidad de Bombeo + Pozo Plutonio=2 + Radiactividad + Metales Sa…

Matemáticas y cine.

El otro día estaba viendo por la televisión una película llamada 21 blackjack. En una escena de la película el profesor de matemáticas (Kevin Spacey) le presenta a uno de sus alumnos la siguiente situación: se encuentra en un concurso en la que debe escoger entre tres puertas (1,2 y 3). En dos de ellas hay una cabra, sin embargo en una de las 3 hay un flamante coche nuevo. El alumno responde que quiere abrir la puerta. El presentador, conocedor de lo que hay detrás de cada puerta decide abrir otra puerta diferente mostrando detrás de ella una cabra. El profesor se dirige al alumno y le pregunta, ¿cambiarías la puerta o te quedarías con la puerta que tienes? Muchos de nosotros cambiaríamos de puerta pensando que es una treta del presentador para engañarnos. ¿Cual elegiríais vosotros? Al comienzo tenemos 1/3 de probabilidades de acertar la puerta donde está el coche. Una vez que el presentador abre la puerta con una cabra, la mayoría de gente piensa que hay la misma probabilidad de ace…

Soluciones Alchemy Classic 442 elementos

Después de la resaca navideña y de la cuesta de enero, volvemos para informar la agradable sorpresa que nos ha dado a los fans de Alchemy Classic la empresa NIASOF,  tras actualizar el juego Alchemy Classic.


Una nueva versión con 442 elementos, interfaz mejorada de grupos y lo más importante, nuevos elementos que descubrir.


La gran novedad de esta actualización son los puntos que tienes asignados, con los que puedes  conseguir pistas sobre los elementos que no has abierto todavía como:



Conseguir un subelemento de un elemento, con 100 puntos.Conseguir el grupo de un subelemento de un elemento (qué lío , jeje), con 35 puntos.
Me gusta, me gusta el enfoque de esta nueva versión aunque los elementos que han sacado me parecen poco originales. Parece que se van agotando las ideas para los elementos nuevos.


Aquí van las soluciones:




Carbon = Tierra + Turba

Sol = Estrella + Tierra


Espacio = 3 x Estrella
Estrella = Helio + Hidrógeno
Oso Panda = Oso + Bambú


Girasol = Sol + Flor


Animales de pezuña hendida = …