Una cookie es un pequeño fichero de texto, almacenado por nuestro navegador en nuestro sistema, el cual almacena información que transmite al servidor en cada petición.

Su objetivo es dar información sobre nosotros al servidor web, para el cual, cada vez que accedemos a un recurso suyo somos un visitante distinto. Normalmente se suelen usar para guardar las preferencias de usuario.

El funcionamiento de las cookies es sencillo. Al acceder a un recurso web se comprueba si poseemos una cookie para dicho dominio y path. Si existe se la enviamos al servidor en los encabezados de la petición. El servidor lee los datos almacenados en ella y de esta forma obtiene de nosotros la información que antes no tenía y, según el caso, puede enviar contenido personalizado para nuestro usuario.

Elementos de una cookie

Una cookie consiste de la siguiente información:

  1. Un par nombre-valor que contiene el dato o datos almacenados.
  2. Una fecha de expiración a partir de la cual la cookie será invalidada (y eliminada).
  3. 3. El dominio y el path del servidor a cual enviará dicho dato.

1. nombre-valor

Cada cookie contiene un par nombre-valor que contiene el dato o datos que se desea almacenar. El nombre se utiliza como referencia para obtener el valor.

2. Fecha de expiración

Las cookies tienen una duración. Si no se especifica nada la cookie será válida mientras el navegador esté abierto.

3. Dominio y path

El dominio y el path indican el ámbito de validez de la cookie. Si no se especifica nada el ámbito será el dominio actual. En este caso www.3sellers.com.

Es importante tener en cuenta que no podemos crear una cookie en un dominio distinto del que nos encontremos.

Las cookies creadas en este dominio sólo se enviaran mientras visitemos páginas o recursos de este dominio. No se enviaran en el caso de otros subdominios, por ejemplo: catalogo.3sellers.com o promocion.3sellers.com, los cuales mantendrán sus propias cookies.

Con el path pasa lo mismo, podemos restringir desde que paths enviar nuestras cookies.

Por ejemplo, /store/page/blog.

Esta cookie sólo se enviaría en este path.

document.cookie

Las cookies se pueden leer usando Javascript, mediante el uso de la propiedad "document.cookie".

Las operaciones básicas sobre una cookies son:

  1. crear
  2. actualizar
  3. leer
  4. borrar

Se puede crear una cookie asignándole una cadena con el contenido de la cookie.

El formato de esta cadena es:

"dato; fecha expiración; path"

1- crear

document.cookie = "usuario=Jose; expires=Tue, 12 Jan 2010 12:23:00 GMT; path=/"

Esto crea una cookie para www.3sellers.com que dura 7 días.

Podemos ver que efectivamente está creada:

document.cookie
"usuario=Jose"

Podemos crear otra cookie de la misma forma:

document.cookie = "cookie=otra_cookie; expires=Tue, 12 Jan 2010 12:23:00 GMT; path=/"

document.cookie
"usuario=Jose; cookie=otra_cookie"

2- actualizar

Podemos actualizar una cookie sobreescribiéndola:

document.cookie = "usuario=Laura; expires=Tue, 12 Jan 2010 12:23:00 GMT; path=/"

document.cookie
"usuario=Laura; cookie=otra_cookie"

3- leer

Para leer el contenido del dato usuario en la cookie debemos parsear el contenido de la cookie para obtenerlo. Esto es más complicado y a continuación mostraré un script para facilitar esta tarea.

4- borrar

No podemos borrar una cookie directamente, hemos de volver a crearla con una fecha de expiración anterior a la fecha actual:

document.cookie = "usuario=Jose; expires=Tue, 12 Jan 2001 12:23:00 GMT; path=/"

El navegador verá que ha expirado y la eliminará.

Script

El siguiente script nos da 3 funciones que nos facilitan el trabajo con cookies:

var Tools = {
  createCookie: function(name, value,days) {
    if (days) {
      var date = new Date();
      date.setTime(date.getTime()+(days*24*60*60*1000));
      var expires = "; expires="+date.toGMTString();
    }else var expires = "";
      document.cookie = name+"="+value+expires+"; path=/";
  },

  readCookie: function(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
      var c = ca[i];
      while (c.charAt(0)==' ') c = c.substring(1,c.length);
      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
  },

  eraseCookie: function(name) {
    Tools.createCookie(name,"",-1);
  }
};

1.- Crear

La función createCookie requiere 3 parámetros, el nombre del dato a almacenar en la cookie, su valor y el numero de días en que éste será válido.

Ejemplo:

Tools.createCookie("usuario", "Jose", 7);

document.cookie
>"usuario=Jose"

2.- Actualizar

Usando la misma función anterior.

Tools.createCookie("usuario", "Laura", 7);

document.cookie
>"usuario=Laura"

3.- Leer

La función readCookie requiere un parámetro, que será el nombre del dato que queremos buscar.

Ejemplo:

Tools.readCookie("usuario");
>Jose

4.- Borrar

La función eraseCookie requiere un parámetro, que será el nombre del dato a eliminar.

Ejemplo:

Tools.eraseCookie("usuario")

document.cookie
>""