Las cookies (o 'galletas', en español) son pequeños archivos que las páginas web guardan (opcionalmente) en el navegador web del usuario, con el fin de guardar configuraciones y obtener otros datos (algunos sitios web las utilizan para recoger información sobre nuestros hábitos y preferencias de navegación, entre otras cosas).
Para usar Cookies en JavaScript en primer lugar hemos de comprobar si están activas en el navegador web del usuario, del siguiente modo:
if( navigator.cookieEnabled == true ) {
alert("El uso de cookies está activado");
}
else {
alert("El uso de cookies está desactivado");
}
Las Cookies se crean usando la propiedad cookie del objeto Document(), al cual debemos pasar una cadena indicando las siguientes secciones separadas con punto y coma, seguido de un espacio:
- Nombre y valor de la cookie.
- Fecha de expiración.
- Ruta en la que será guardada.
En el siguiente ejemplo creamos dos cookies:
document.cookie = "miCookie1=pepe; expires=Mon, 25 May 2012 11:12:13 UTC; path=/";
document.cookie = "miCookie2=557; expires=Mon, 25 May 2012 11:12:13 UTC; path=/";
Es muy importante que la estructura de la cadena para la creación de la cookie sea correcta.
Para que los ejemplos con cookies funcionen, debes cargar la página web desde un servidor web (no funcionará si se abre el archivo haciendo doble clic sobre él).
Para acceder a las cookies usaremos también la propiedad cookies del Document(), con la que las obtendremos en una cadena de texto:
var misCookies = document.cookie;
document.write( "COOKIES: [" + misCookies + "]" );
Veríamos algo como:
Observa que hay un espacio después del punto y coma de cada cookie creada, a partir de la segunda.
Para leer el valor de cada sección de la cookie debemos obtener la parte de la cadena en que se encuentra (teniendo en cuenta los delimitadores de la misma).
En el siguiente ejemplo creamos unas cookies y a continuación mostramos sus respectivos valores, a partir de la cadena obtenida:
// Crear las Cookies:
document.cookie = "miCookie1=APRENDERinformática_1; expires=Mon, 25 May 2012 11:12:13 UTC; path=/";
document.cookie = "miCookie2=APRENDERinformática_2; expires=Mon, 25 May 2012 11:12:13 UTC; path=/";
document.cookie = "miCookie3=APRENDERinformática_3; expires=Mon, 25 May 2012 11:12:13 UTC; path=/";
// Mostrar la cadena con las cookies:
document.write( "COOKIES:" + document.cookie + "<p />" );
// Obtener un array con el nombre y valor de una cookie guardados como cadena, en cada posición:
var aCookies = document.cookie.split(";");
// Variables auxiliares:
var contador;
var posicionSignoIgual;
var nombreCookie;
var valorCookie;
for( contador=0; contador < aCookies.length; contador++ )
{
// Obtenemos la posición en la que está el signo igual
// No lo ponemos fuera del bucle porque los nombres puede que no tengan la misma longitud
posicionSignoIgual = aCookies[contador].indexOf("=");
// Obtenemos el nombre de la cookie, eliminando espacios
nombreCookie = aCookies[contador].substring( 0, posicionSignoIgual ).replace(" ", "");
// Añadimos 1 'posicionSignoIgual' porque con substring() las posiciones de la cadena comienzan desde cero:
valorCookie = aCookies[contador].substring( posicionSignoIgual + 1 );
// Mostramos el valor
document.write( "[" + nombreCookie + "] = [" + valorCookie + "]<br />" );
}
Se mostraría algo como lo siguiente:
Modificando un poco el ejemplo anterior podríamos crear una función, que nos devuelva el valor de la cookie que indiquemos:
function leerCookie( nombre_cookie )
{
// Obtener un array con el nombre y valor de una cookie guardados como cadena, en cada posición:
var aCookies = document.cookie.split(";");
// Variables auxiliares:
var contador;
var posicionSignoIgual;
var nombreCookie;
var valorCookie;
for( contador=0; contador < aCookies.length; contador++ )
{
// Obtenemos la posición en la que está el signo igual
// No lo ponemos fuera del bucle porque los nombres puede que no tengan la misma longitud
posicionSignoIgual = aCookies[contador].indexOf("=");
// Obtenemos el nombre de la Cookie, eliminando espacios
nombreCookie = aCookies[contador].substring( 0, posicionSignoIgual ).replace(" ", "");
if( nombreCookie == nombre_cookie )
{
// Añadimos 1 'posicionSignoIgual' porque con substring() las posiciones de la cadena comienzan desde cero:
valorCookie = aCookies[contador].substring( posicionSignoIgual + 1 );
}
}
return valorCookie;
}
// --------------------
// Creamos las cookies:
document.cookie = "miCookie1=APRENDERinformática_1; expires=Mon, 25 May 2012 11:12:13 UTC; path=/";
document.cookie = "miCookie2=APRENDERinformática_2; expires=Mon, 25 May 2012 11:12:13 UTC; path=/";
document.cookie = "miCookie3=APRENDERinformática_3; expires=Mon, 25 May 2012 11:12:13 UTC; path=/";
// Obtenemos el valor de una de ellas:
var valor = leerCookie( "miCookie2" ) ;
if( valor != undefined )
document.write("<p>El valor de 'miCookie2' es [" + valor + "]</p>" );
else
alert("<p>No se encontró la Cookie.</p>" );
Al crear y acceder a las cookies hemos de escribir su nombre respetando mayúsculas y minúsculas.
Para borrar una cookie basta simplemente con asignarle una fecha anterior, por ejemplo:
document.cookie = "miCookie1=pepe; expires=Sat, 11 Dec 1999 12:00:00 UTC; path=/";
