En la programación web, una de las cosas cada vez más importantes es la experiencia de usuario mientras está navegando por nuestro sitio o aplicación web. Para ello es importante el diseño en sí y la personalización. Para esta personalización de los contenidos se suele utilizas las cookies en Javascript. Mediante su uso se puede guardar preferencias o datos del usuario de manera que cuando navegue por la web, esta se ajustará a las preferencias del usuario, sin tener que mandarlas al servidor.
Por ejemplo, a parte de datos del mismo usuario, se puede guardar preferencias como la ubicación de los elementos de la web, el aspecto, el orden de los elementos de una lista, etc. Por ello las cookies en Javascript abren un montón de puertas en lo que a la experiencia del usuario se refiere.
Los cookies son pares de clave:valor, es decir, se define una clave que será por la que se buscará y se recuperará su valor. Para crear nuevas cookies en JavaScript, se puede hacer mediante la siguiente asignación:
document.cookie="nombre=Pepe"; document.cookie="apellido=García";
En este ejemplo, se habrán creado dos cookies: el nombre y el apellido. Como se observa se crea una cookie por línea.
A las cookies se les puede dar atributos, como por ejemplo la fecha de caducidad, en la cual la cookie dejará de tener validez. Esto se hace definiendo el atributo expires, en el momento de su creación. En este ejemplo, caducará el día 1 de abril de 2015, a las 10:30. :
document.cookie="nombre=Pepe; expires=Wed, 01 Apr 2015 10:30:00 UTC";
Para modificar una cookie en JavaScript, bastará con volverla a definir, de la misma manera que se ha hecho al crearla. Sin embargo, no hay ningún comando para eliminarlas, lo que hay que hacer es volver a definirlas con una fecha que ya haya pasado. De esta forma, el sistema detectará que ha pasado la fecha y automáticamente la descartará.
Por último, para recuperar el contenido de una cookie mediante su clave, se puede utilizar la siguiente función.
function obtenerCookie(nombreCookie){
var listaCookies = document.cookie.split(';');
for(var i=0; i<listaCookies.length; i++) {
var nombre = listaCookies[i].split('=')[0];
if(nombre.trim()==nombreCookie){
return listaCookies[i].split('=')[1].trim();
}
}
return '';
}En esta función, recupera la lista de cookies en una variable llamada listaCookies. Esta variable es un array con todas las cookies, por lo que simplemente lo recorre buscando la clave que coincida con la parte izquierda del igual, es decir, la clave de la misma. Y retorna la parte derecha del igual, lo que viene a ser el valor de la cookie.
