1. Qué son Indice

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 Indice

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).

1. Consultar antes de establecer
2. Establecer la cookie
3. Consultar en menos de 1 minuto
4. Consultar en otro directorio
5. Espera a que el ordenador te avise de que ha expirado la cookie
6. Consultar pasado 1 minuto

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 Indice

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.