LocalStorage y SessionStorage – HTML5 Almacenamiento Web

LocalStorage y SessionStorage – HTML5 Almacenamiento Web

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.

if(typeof(Storage) !=="undefined"){
	//lo soporta
}else{
	//NO los soporta
}

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


¿Sabías que?

¿Necesitas hosting wordpress? WebEmpresa te ofrece un servicio super rápido, excelente soporte en español y certificado SSL gratuito:

WebEmpresa



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


function boton_CLICK(){
	if(typeof(Storage) !=="undefined"){
		//Informacion Permanente
		if(localStorage.clicks){
			localStorage.clicks++;
		}else{
			localStorage.clicks = 1;
		}
		//Informacion en la Sesion
		if(sessionStorage.clicks){
			sessionStorage.clicks++;
		}else{
			sessionStorage.clicks = 1;
		}
		document.getElementById("panel_info").innerHTML="

Informacion Permanente con LocalStorage

Numero de Clicks Totales: " + localStorage.clicks+"

Informacion en Sesion con SessionStorage

Numero de Clicks en esta Sesion: "+sessionStorage.clicks+"

Cierra la pagina y vuelvela a abrir para que veas como la informacion permanente se mantiene y la informacion de session se pierde.

"; }else{ //no soporta Almacenamiento web html5 } }

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.

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

Clic para valorar esta información
[Total: 0 Promedio: 0]