Web storage es un API de HTML5 que nos permite guardar datos estructurados en el cliente. Sustituye a las famosas cookies que son enviadas en las cabeceras HTTP. Los datos almacenados en disco solo podrán ser accedidos desde el cliente y no desde el servidor, se busca con esto aumentar la seguridad de la información enviada, además el tamaño de los datos almacenados en disco podrá ser mayor, aproximadamente de 5 Mb.

Web Storage define dos tipos de almacenamiento: sessionStorage y localStorage

sessionStorage

La información manejada mediante este mecanismo podrá ser accedida solo durante la sesión y en caso de tener varias ventanas abiertas la información mostrada en cada una de ellas podrá ser distinta. Los datos se perderán una vez se cierre el navegador.

localStorage

Permite guardar datos que podrán ser accedido una vez cerremos el navegador. La información será la misma en todas las ventanas abiertas dentro de una misma sesión.

Tanto sessionStorage como localStorage pueden hacer uso de los siguientes métodos y atributos:

• setItem (setItem(key, value)): Permite almacenar un valor para una clave dada
• geItem (geItem(key)): Permite recuperar un valor de clave dada
• removeItem (removeItem(key)): Bora una clave y su valor
• clear (clear()): Borra todas las claves almacenadas
• length Este atributo nos permite calcular el número de claves guardadas
• key (key(index)): Permite recuperar una clave pasándole un índice determinado. Mediante un bucle y el uso de este método podremos recuperar todas las claves guardadas en nuestro disco.

  Código JavaScript

  
  for (var i= 0; i < localStorage.length; ++ i){
      claves[i] = localStorage.key(i)
  }
       

Respecto al soporte que ofrecen los navegadores web para esta API lo podéis ver en la siguiente tabla: Fuente: caniuse.com

A continuación os pongo un formulario para que podáis probar el funcionamiento de los dos mecanismos que nos proporciona la API de JavaScript Web Storage:

Nombre (LocalStorage)
Nombre (SessionStorage)

     
$(document).ready(function()
{	
    function setNombre() {
	  var nombreLocal = $("#nombre").attr("value");
	  var nombreSesion = $("#nombre2").attr("value");
	  localStorage.nombre=nombreLocal; 
	  sessionStorage.nombre=nombreSesion; 
	  Bienvenida();
    }

    function Bienvenida(){
	  if(localStorage.nombre != null)	
	    $("#txtLocal").html("Bienvenido: "+ localStorage.nombre +" (localStorage)")
	  if(sessionStorage.nombre != null)	
	    $("#txtSesion").html("Bienvenido: "+ sessionStorage.nombre +" (sessionStorage)")
	}
	
	$(".enviar").click(function(){		 						  
         setNombre() 
	 	 return false;
	});
	
	$(".limpiar").click(function(){		 						  
         localStorage.clear()
		 sessionStorage.clear()
	});
	
	Bienvenida()
}); 
     

• Puedes seguir cualquier respuesta a esta entrada mediante la fuente RSS 2.0.
• Puedes dejar un comentario o enviar un trackback desde tu propio sitio.