w3.unpo<code>todo

Trabajar con cookies

Una Web Cookie o HTTP Cookie también llamada galleta o galleta informática es un fragmento pequeño de información que el server envía al navegador del usuario. El navegador la puede almacenar y la envía de vuelta con el siguiente request ( solicitud ). Normalmente se utiliza para saber si el usuario ha iniciado sesión. También puede ser utilizado para personalizar el aspecto de una página web o para rastrear y analizar el comportamiento y las pautas de los usuarios. Por razones de seguridad no se recomienda utilizar cookies para almacenar datos personales.

Definir una cookie

Para definir una cookie hay que utilizar el método cookie de document.

document.cookie = nuevaCookie

Donde nuevaCookie es una cadena de texto que contiene una lista de valores separados por un punto y coma.

Supongamos que queremos definir una cookie cuyo nombre es "nombreUsuario".

var nombre_cookie = "nombreUsuario";

y cuyo valor es el nombre de usuario.

var valorCookie = "Gabi";

Primero tenemos que definir la data cuando la cookie expira, pero esto es opcional. Si no la especificamos, se considera que la cookie dura solo una sesión y está destruido enseguida que la sesión acaba.

var data = new Date();

El valor de la data cuando la cookie expira tiene que ser en milisegundos. Por ejemplo si queremos que la cookie expire despues de 365 dias, y teniendo en cuenta que cada día tiene 24 horas, y cada hora: 60 minutos, y cada minuto 60: segundos, y cada segundo: 1000 milisegundos, podemos escribir:

data.setTime(data.getTime() + 365 * 24 * 60 * 60 * 1000);

El método toUTCString()  convierte la data en una cadena de texto ( string ), utilizando la zona horaria UTC: Coordinated Universal Time, o Tiempo universal coordinado.

var expira = data.toUTCString();

También podemos establecer la ruta ( path ). Si no especificada, el valor por defecto es la ubicación actual.
Si queremos que la cookie sea accesible en todo el dominio web tenemos que escribir:

var ruta = "/";

donde "/" representa el directorio raíz.
Alternativamente, si queremos que la cookie sea accesible solo en un cierto subdirectorio tenemos que escribir:

var ruta = "/subdirectorio";

Ahora podemos declarar la nueva cookie:

var nuevaCookie =  nombre_cookie + "=" + valorCookie + 
                   "; expires=" + expira + 
                   "; path=" + ruta;
document.cookie = nuevaCookie;

Naturalmente todo esto sería mucho más útil si lo ponemos en una función:

function crearCookie(nombre, valorCookie, dias) {
    if (dias) {
      // el argumento dias es opcional
      // si no especificamos la data cuando expira, se considera que la cookie dura solo una sesion y es destruido enseguida que la sesión acaba.
      var data = new Date();
      // establece la data cuando la cookie expira en milisegundos
      data.setTime(data.getTime() + dias * 24 * 60 * 60 * 1000);
      //El método toUTCString() convierte la data en una cadena de texto (string), utilizando la zona horaria UTC (Coordinated Universal Time).
      var expira = data.toUTCString();
      var ruta = "/";
      // "/" representa el directorio raíz. O sea: la cookie es accesible en todo el dominio web si var ruta = "/subdirectorio" la cookie será accesible solo en este subdirectorio. 
  }
    var nuevaCookie = nombre + "=" + valorCookie + "; expires=" + expira + "; path=" + ruta;
    document.cookie = nuevaCookie;
  }

Leer las cookies

El método cookie de document puede ser utilizado también para leer las cookies de un documento.

var todasLasCookies = document.cookie;

El resultado de esto es una larga cadena de texto  representando todas las cookies declaradas en el documento. Para separarlas en un array podemos utilizar el método split.

document.cookie.split(';')

Sabiendo esto podemos escribir una función para leer las cookies:

  function leerCookie(nombre) {
      var Nombre = nombre + "=";
      var cRy = document.cookie.split(';');// el array de las cookies
      for(var i=0;i < cRy.length;i++) {
          var c = cRy[i];// la cookie
          //recorta cualquier espacio en blanco al inicio:
          while (c.charAt(0)==' ') c = c.substring(1,c.length);
          // devuelve el valor de la cookie
          if (c.indexOf(Nombre) == 0) return c.substring(Nombre.length,c.length);
      }
      // si ninguna cookie no fue encontrada
      return null;
  }

Borrar una cookie

Para borrar una cookie simplemente creamos de nuevo la misma cookie, cuyo valor esta vez es una cadena vacía de texto ( "" ), y que expira antes del momento actual: por ejemplo ayer ( -1 ).

function borrarCookie(nombre_cookie) {
      crearCookie(nombre_cookie,"",-1);
}

Veamos un ejemplo

El HTML del siguiente ejemplo es muy sencillo:

<p id="mensaje"></p>
<p><button id="establecerCookie" />establecer cookie</button></p>

Para declarar la cookie hay que hacer clic en el botón #establecerCookie. Para esto utilizamos el evento "click".

establecerCookie.addEventListener("click",function(){
   crearCookie(nombre_cookie,'Gabi',dias_cookie);
  },false);

También utilizamos una sentencia condicional if para detectar si la cookie está declarada, y si lo esta, el script tiene que cambiar el innerHTML del #mensaje y esconder el botón #establecerCookie. De lo contrario ( if(!hayCookie) ) el mensaje es "Bien venido".

  var hayCookie = leerCookie(nombre_cookie);
  if (!hayCookie) {
      mensaje.innerHTML = "Bien venido";
  }else{
      mensaje.innerHTML = "Hola "+ hayCookie; 
      establecerCookie.style.display = "none";
  }

El problema es que el cambio será visible solo después del siguiente request ( por ejemplo al recargar la página ). Para ver un cambio inmediatamente tenemos que añadir dos líneas de código:

establecerCookie.addEventListener("click",function(){
   crearCookie(nombre_cookie,'Gabi',dias_cookie);
   mensaje.innerHTML = "Hola Gabi!";
   establecerCookie.style.display = "none";
  },false);

Vea este ejemplo en codepen:

See the Pen cookies* by Gabi (@enxaneta) on CodePen.

Para borrar la cookie simplemente abra la consola del navegador y llame la función borrarCookie:

borrarCookie(nombre_cookie)