LocalStorage y SessionStorage – HTML5 Almacenamiento Web

LocalStorage y SessionStorage – HTML5 Almacenamiento Web

LocalStorage y SessionStorage – HTML5 Almacenamiento Web
5 (100%) 1 voto

Entre las caracteristicas de HTML5 esta la de HTML5 web Storage, que es almacenar informacion del usuario necesaria para el control de sesiones o personalizacion de la sesion. El almacenamiento Local Web de HTML5 permite un mejor funcionamiento que las ya conocidas Cookies, es mas seguro y mas rapido, los datos no son incluidos en cada peticion al servidor son solo utilizados cuando se piden, tambien es posible almacenar una mayor cantidad de informacion y no afecta el rendimiento del sitio. La informacion es almacenada en la forma “Llave – Valor” y una pagina web solo puede accesar a la informacion almacenada por ella misma. Veamos como Almacenar Informacion del usuario en tu sitio web a traves de los objetos LocalStorage y SessionStorage en Html5, Comencemos…

Requerimientos

Que Utilizaremos?

LocalStorage y SessionStorage - HTML5 Almacenamiento WebComo dijimos antes, lo haremos mediante dos objetos de HTML5. LocalStorage y SessionStorage permiten almacenar informacion del lado del cliente, la informacion almacenada mediante el primero no caducara, al contrario, la informacion almacenada mediante SessionStorage caducara al terminar la session.

Como Hacerlo?

Antes que nada comprabaremos si el navegador soporta almacenamiento web con HTML5.

Si es soportado podemos comenzar a guardar informacion ya sea permanente (localstorage) o volatil (SessionStorage). Nosotros vamos a crear un simple ejemplo en el que crearemos un boton y almacenaremos los clicks que recibe, lo haremos a traves de las 2 formas mediante los 2 objetos. Almacenaremos los clicks totales y los clicks en esa sesion ( Recuerda que una sesion termina hasta que se cierra la pestaña o navegador web).

Primero creamos un boton

Este boton llama una funcion Javascript llamada boton_CLICK(), la cual dice:

Aqui practicamente esta todo el codigo de este Articulo, primero se comprueba que el navegador sea compatible con el almacenamiento web con html5, luego se revista si estan declaradas las variables clicks tanto en localStorage como en SessionStorage, si es la primera vez que se llaman se establecen a 1 (recuerda que la funcion se llama cada vez que se recibe un click, por lo tanto la cuenta debe aumentar) si ya estan establecidas las variables solo las aumentamos a 1. Al final solo obtenemos el elemento con el id “panel_info” que es un div y agregamos los mensajes de la cuenta de clicks a traves de las variables clicks de localstorage y sessionstorage.


¿Sabías que?

¿Necesitas hospedaje web? DigitalServer te ofrece un 50% de descuento en cualquier plan de hosting a partir del plan Micro! Solo copia el cupon: PROMOEXH y sigue el siguiente enlace:

Obtener 50% de descuento

Al cerrar la pestaña o Ventana de tu navegador la cuenta de clicks totales permanecera y la de clicks de la sesion sera reiniciada.

Compatibilidad?

  • Internet Explorer 8+
  • Firefox
  • Opera
  • Chrome
  • Safari

Resultado en Funcionamiento

Quieres ver el codigo en funcionamiento? Visita el lab de pruebas, recuerda que puedes ver el codigo fuente en cualquier momento pulsando Ctrl + U en la mayoria de Navegadores.

LocalStorage y SessionStorage – HTML5 Almacenamiento Web

Visto – LocalStorage y SessionStorage – HTML5 Almacenamiento Web

LocalStorage y SessionStorage – HTML5 Almacenamiento Web
5 (100%) 1 voto

1
Dejar un comentario

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
celso Recent comment authors
  Subscribe  
Notify of
celso
Guest
celso

buenas nochesn

como hacer un logiin utilizando sesionstorege
y localstoreg