1. Qué son |
![]() |
Las cookies son la única forma que tiene Javascript de guardar información en el disco duro de la persona que visita nuestra página. Para ello, el navegador de esa persona debe tener habilitadas las cookies, porque si no, no nos dejará escribir nada. La información guardada en una cookie puede ser leida y modificada tantas veces como queramos desde una página web, de esta forma podemos guardar datos sobre ese usuario que no se perderán ni cuando el usario visite otras páginas, ni cuando apague su ordenador.
Dentro del disco duro del cliente, las cookies se guardan en un lugar
u otro en función del navegador usado. Por ejemplo, Netscape/Mozilla
usa un fichero por cada "usuario" del ordenador/navegador. Todas sus
cookies están en ese fichero (llamado normalmente
cookies.txt
). Sin embargo, I.Explorer usa un fichero por
cada dominio (con nombre usuario@dominio
), dentro de un
directorio llamado Cookie
que está dentro del directorio
de preferencias de cada usuario.
En cualquier caso, esto es totalmente trasnparente para el programador, y podemos despreocuparnos de si el cliente usa Netscape, Mozilla, I. Explorer o lo que más le guste.
Desde el punto de vista de Javascript, Las cookies se guardan en una
propiedad del objeto document
llamada
cookie
. Si nuestra página web ha definido alguna cookie,
este propiedad tendrá algún valor, si no, estará indefinida. El
formato de esta propiedad es: nombreCookie1=valor1;
nombreCookie2=valor2
Afortunadamente, existen funciones que agilizan el establecimiento y recuperación del valor de una cookie. Son precisamente las que vamos a ver en la próxima sección.
Cómo se usan |
![]() |
Existen una serie de funciones definidas, a saber:
setCookie
, getCookie
,
delCookie
, cuyo significado es fácil de comprender. A
continuación se transcribe el código de las mismas. Cópialo y guárdalo
en un fichero cookies.js
para su mejor uso.
/* ---------------------------------------------------------------------- Fichero.....: cookie.js Fecha.......: 22-Sep-2003 Descripción.: Funciones para el uso de cookies. Curso de Javascript - Víctor Rivas Santos http://geneura.ugr.es/~victor ---------------------------------------------------------------------- */ // Esta es la función que usa Heinle para recuperar una cookie // name - nombre de la cookie deseada // devuelve un string conteniendo el valor de la cookie especificada o null si la cookie no existe function getCookie(name){ var cname = name + "="; var dc = document.cookie; if (dc.length > 0) { begin = dc.indexOf(cname); if (begin != -1) { begin += cname.length; end = dc.indexOf(";", begin); if (end == -1) end = dc.length; return unescape(dc.substring(begin, end)); } } return null; } // Esta es una adaptación de la función de Dorcht para establecer una cookie // name - nombre de la cookie // value - valor de la cookie // [expires] - fecha de caducidad de la cookie (por defecto, el final de la sesi?n) // [path] - camino para el cual la cookie es válida (por defecto, el camino del documento que hace la llamada) // [domain] - dominio para el cual la cookie es válida (por defecto, el dominio del documento que hace la llamada) // [secure] - valor booleano que indica si la trasnmisión de la cookie requiere una transmisión segura // al especificar el valor null, el argumento tomará su valor por defecto function setCookie(name, value, expires, path, domain, secure) { document.cookie = name + "=" + escape(value) + ((expires == null) ? "" : "; expires=" + expires.toGMTString()) + ((path == null) ? "" : "; path=" + path) + ((domain == null) ? "" : "; domain=" + domain) + ((secure == null) ? "" : "; secure"); } // Esta es una adaptación de la función de Dorcht para borrar una cookie // name - nombre de la cookie // [path] - camino de la cookie (debe ser el mismo camino que el especificado al crear la cookie) // [domain] - dominio de la cookie (debe ser el mismo dominio que el especificado al crear la cookie) // se considera el camino y dominio por defecto si se especifica null o no se proporcionan argumentos function delCookie (name,path,domain) { if (getCookie(name)) { document.cookie = name + "=" + ((path == null) ? "" : "; path=" + path) + ((domain == null) ? "" : "; domain=" + domain) + "; expires=Thu, 01-Jan-70 00:00:01 GMT"; } }
Sin duda, la función más compleja es setCookie, que es la que permite establecer el valor de una cookie. Veamos cómo se usa.
Su forma más simple es: setCookie( "nombre",valor );
, que
te crea una cookie que se destruirá cuando el usuario cierre su sesión
(cierre el navegador), y es accesible sólo por las páginas web cuyo
dominio y camino de directorios sea los mismos que el de esta página
en la que creas la cookie.
Por el contrario, su forma más extensa es:
setCookie( "nombre",valor, expira, directorios, dominio, seguro );
, donde:
El siguiente ejemplo establece una cookie llamada CLIENTE con el valor VICTOR RIVAS. La cookie expira en 1 minuto y está accesible sólo para los documentos que cuelguen del directorio /~vrivas/cursillos/javascript del dominio geneura.ugr.es.
<script> // Primero establecemos la fecha de expiración: mañana a esta misma hora var expira=new Date(); expira.setMinutes( expira.getMinutes()+1 ); // A continuación establecemos la cookie setCookie( "usuario", "Víctor Rivas", expira, "/~victor/cursillos/javascript", "geneura.ugr.es", false ); </script>
Para probarlo, pincha en los siguientes botones de forma consecutiva (si quieres asegurarte de que no toma los ficheros de la memoria caché, pincha en los botnones mientras mantienes pulsada la tecla de mayúculas).
Podemos decir que lo más "complejo" es el establecimiento de la
fecha de expiración. En el ejemplo, he hecho uso de la función
setMinute
que mdifica los minutos almacenados en una
variable de tiempo (en este caso, la variable la he llamado
expira
). Lo he probado con Mozilla e I. Explorer y
funciona sin problemas.
Ejemplos de cookies |
![]() |
El siguiente ejemplo establece un contador de visitas a la página en que está ubicado el código.
<script> var contador=getCookie( "contador" ); ++contador; setCookie( "contador", contador ); document.writeln( "Ha visitado usted esta página "+contador+ " veces."); </script> <BR> <A HREF="contador_cookies.html" TARGET="_cookies">Recargar página </script>
Pincha en contador_cookies.html para ver su funcionamiento. Cuando se abra la página, pincha en "Recargar página" para ver cómo se incrementa el contador.