¿Qué es una Cookie?

En este artículo vamos a definir que es una Cookie y como implementarla en una página web para obtener una mayor definición conceptual.

A continuación mostramos un ejemplo (Nota -> una "cookie" viene definida por una clave y valor).

¿Qué es una Cookie?

Una Cookie es un pedazo de información que guarda una página web en un fichero almacenado en el navegador del cliente que accede a la misma. Esta información puede ser guardada, modificada y leída si el navegador del cliente tiene configurada esta opción.

Desde el punto de vista del desarrolador web, se pueden acceder a estos tipos de datos o variables desde el objeto document en JavaScript, mediante el acceso a la propiedad cookie. Es decir, trabajaremos sobre document.cookie.

A continuación mostramos un ejemplo (Nota -> una "cookie" viene definida por una clave y valor).

PASO 1: CONSULTA

<script type="text/javascript">
 /*
 * Función para obtener dentro del Array de Cookies del 
 * objeto document la cookie dado su clave.
 */
 function obtenerCookie(nombreCookie)
 {
  var clave, valor;
  var ArrayCookies = document.cookie.split(";");
  for (var i=0;i<ArrayCookies.length;i++)
  {
   clave = ArrayCookies[i].substr(0, ArrayCookies[i].indexOf("="));
   valor = ArrayCookies[i].substr(ArrayCookies[i].indexOf("=") + 1);
   clave = clave.replace(/^s+|s+$/g,"");
   if (clave == nombreCookie)
    return unescape(valor);
  }
 }
 
 /*
 * Función que muestra un mensaje de alerta con el valor de la cookie dado su clave.
 */
 function checkCookie(nombreCookie)
 {
  var miCookie = obtenerCookie(nombreCookie);
  alert(miCookie);
 }
</script>
     

En este código podemos observar dos funciones, la primera obtenerCookie(nombreCookie) que dado la clave nombreCookie nos devuelve el valor.

checkCookie(nombreCookie) que de momento nos mostrará un mensaje de alerta con el valor de nombreCookie ya que está función llama a la anterior para mostrar el valor del mismo.

Por lo que crearemos un botón que nos devuelva el valor de nuestra cookie con clave ejemploCookie, es decir, pondremos en su evento onclick la instrucción checkCookie('ejemploCookie');.

Para ejemploCookie se nos presenta por mensaje el valor undefined, es decir, no tiene un valor definido.

PASO 2: CONSULTA Y CREACIÓN

<script type="text/javascript">
 /*
 * Función que dado la clave, valor y caducidad, se encarga de generar la cookie.
 */
 function generaCookie(nombreCookie, valorCookie, diasCaducidad)
 {
  var cDate = new Date();
  cDate.setDate(cDate.getDate() + diasCaducidad);
  var valor = escape(valorCookie) + ((diasCaducidad==null) ? "" : "; expires=" + cDate.toUTCString());
  document.cookie = nombreCookie + "=" + valor;
 }
 /*
 * Función que muestra un mensaje de alerta con el valor de la cookie dado su clave si lo encuentrae en el
 * conjunto de cookies del navegador y si no abre una ventana de confirmación para generarla con el valor 
 * especificado.
 */
 function checkCookie2(nombreCookie)
 {
  var miCookie = obtenerCookie(nombreCookie);
  if (miCookie != undefined && miCookie != "")
  {
   alert("El valor en las cookies de " + nombreCookie + " es: " + miCookie);
  }
  else
  {
   miCookie = prompt("Introduzca un valor para nuestra cookie '" + nombreCookie + "'", "");    
   if (miCookie != undefined && miCookie != "")
   {
    generaCookie(nombreCookie, miCookie, 1);
    alert("Se ha creado la cookie " + nombreCookie + " con valor: " + miCookie);
   }
   else
   {
    alert("No se ha generado la cookie " + nombreCookie);
   }
  }
 }
</script>
     

En este código podemos observar otras dos funciones, la primera generaCookie(nombreCookie, valorCookie, diasCaducidad) en la cual se le pasa el nombre de la cookie a generar (nombreCookie), el valor de la cookie (valorCookie) y el número de días que tiene la cookie de expiración en el almacenamiento de cliente (diasCaducidad).

Posteriormente se ha creado checkCookie2(nombreCookie) que dado nombreCookie consultará el valor si lo tiene y si no mostrará una ventana de confirmación para insertar el valor deseado para posteriormente llamar a la función anterior, es decir, generaCookie(nombreCookie, valorCookie, diasCaducidad).

Por lo que vamos a crear un segundo botón que nos devuelva el valor de nuestra cookie con clave ejemploCookie si existe y sino que procede a crearlo, es decir, pondremos en el evento del segundo botón (onclick) la instrucción checkCookie2('ejemploCookie');.

Una vez creada correctamente, podemos consultar en cualquier de los dos botones atenriores. Nótese: Si se ha fijado nuestra cookie expirará en un día, es decir, durante 24 horas la cookie estará almacenada en su navegador, ¿dónde se ha declarado esta caducidad? Se deja al lector como ejercicio de entendimiento esta pregunta y la implementación de la función eliminarCookie(nombreCookie).

Referencias

¿Qué es una Cookie? by José Joaquín Sánchez

1 comentario:

Con la tecnología de Blogger.