Utilización de localStorage con JavaScript

Qué es localStorage y unos ejemplos sencillos de funcionamiento

Si quieres ir directamente al ejemplo en funcionamiento, está en Ejemplo completo de localStorage con JavaScript (se abrirá en una página nueva).

localStorage es un método de almacenamiento de información que pueden utilizar las páginas web.

Se podría decir que es una "super cookie", porque básicamente hace lo mismo: almacena información en el ordenador o dispositivo del cliente, pero el límite de la información que se puede almacenar es mucho mayor al de una cookie. Este límite depende del navegador y del sistema operativo.

A esta información, al igual que a las cookies, sólo puede acceder el dominio que las generó.

También existe la sessionStorage que se borra cuando expire la sesión o se cierre la ventana que la generó. El localStorage permanece para futuras visitas, hasta que sea borrado por la web que lo generó o por nosotros mismos.

Acceder al localStorage

Pincha en el código para copiarlo

if (localStorage === undefined)
{
	console.log("Este navegador no soporta localStorage.");
}
else
{
	console.log("Esto es lo que hay en tu localStorage de esta web:");
	console.log(localStorage);
}

Guardar y recuperar datos en localStorage

Tenemos tres formas de leer y escribir datos en localStorage para acceder a su información.

Escritura	Lectura
localStorage.visitas = 1; localStorage["color_fondo"] = "yellow"; localStorage.setItem("color_texto", "green");	var visitas = localStorage.visitas; var color_fondo = localStorage["color_fondo"]; var color_texto = localStorage.getItem("color_texto");

Se pueden almacenar y recuperar variables de todo tipo, incluido los arrays. Para este caso de los arrays yo utilizo JSON.

Tienes un ejemplo en funcionamiento en Ejemplo completo de localStorage con JavaScript (se abrirá en una página nueva).