Con el desarrollo de las nuevas API que vienen con el HTML5, podemos optar por ciertas alternativas a las cookies (que tanto dolor de cabeza han dado últimamente).
Estos métodos que sirven para almacenar datos vía Javascript son localStorage
y sessionStorage
Por supuesto, no podemos reemplazar completamente las cookies (no podemos acceder mediante PHP a un item de localStorage
), pero gracias a ellas podemos almacenar datos, y acceder a ellos en otro momento.
El soporte actual es de todos los navegadores menos IE7 y menor (sí, IE8 lo soporta)
localStorage
Con window.localStorage
podemos almacenar datos hasta que nosotros queramos, con sus métodos setItem
y getItem
.
Obviamente, sólo podemos ver datos almacenados en nuestro mismo dominio (por razones de seguridad).
Un ejemplo:
//Comprobación por IE7
if("localStorage" in window){
// Asignamos a la clave "nombre-de-usuario" el valor "Pepe"
window.localStorage.setItem("nombre-de-usuario", "Pepe");
}
// En otra parte del código, mostramos el nombre si existe
if( "localStorage" in window && window.localStorage.getItem("nombre-de-usuario") ){
alert("Hola, " + localStorage.getItem("nombre-de-usuario"));
} else {
alert("Hola, desconocido!")
}
// Para borrar el nombre de usuario
if("localStorage" in window && confirm("¿Quieres que borremos tu nombre de usuario?")){
localStorage.removeItem("nombre-de-usuario")
}
Este es un ejemplo muy simple, pero se puede usar para muchísimas cosas.
sessionStorage
El objeto sessionStorage
funciona de la misma manera que localStorage
, con una diferencia: localStorage
es permanente (el usuario puede cerrar el navegador y apagar el ordenador que los datos siguen almacenados), que sessionStorage
es borrado al cerrar el navegador.
Para una explicación algo más detallada que mis propias palabras, recomiendo leer la documentación de MDN