VN:F [1.9.22_1171]
Rating: 2.5/5 (4 votes cast)

¿Qué son las cookies?

En palabras bastante cristianas, las cookies son elementos que se almacenan en el browser o navegador del usuario (Firefox, Chrome, Internet Explorer, etc.) y en los cuales podemos guardar pequeños datos. Las cookies son útiles, por ejemplo, para saber si el usuario ya visitó (o no) anteriormente nuestra página.

A las cookies se les puede dar gran cantidad de usos, pero ya eso dependerá de lo que deseamos hacer. El siguiente es un ejemplo simplemente para aclarar un poco más el uso de las cookies, por razones de seguridad o facilidad de rompimiento de este mecanismo (ya les diré porqué) no les recomiendo implementarlo en un caso real.

Ejemplo de uso de cookies con JavaScript

Tengo un sitio desde el que se pueden descargar programas de forma gratuita y por algún motivo (probablemente el consumo de ancho de banda) decidí limitar el número de descargas diarias que un usuario puede realizar a un máximo de 5. En mi sitio los usuarios no deben estar registrados para poder descargar dichas aplicaciones, por lo cual, no sabemos quién está descargando el contenido.

Para solucionar esto se me ocurre crear una cookie con JavaScript cuando el visitante llega por primera vez a mi sitio. Esta cookie creada con JavaScript va a tener un valor inicial de 0 (cero), lo que indica que el usuario aún no descargó nada (tiene sus 5 descargas disponibles).

Esta cookie será nuestro contador de descargas, y cada vez que el usuario descargue un archivo le sumaremos 1 (uno) al valor que contiene. Un ejemplo:

if(iContadorDeDescargas>=5){
    alert('Lo siento, no es posible realizar más de 5 descargas diarias.');
}else{
    iContadorDeDescargas++;
    //es lo mismo que iContadorDeDescargas+=1 ó iContadorDeDescargas=iContadorDeDescargas+1
    location='archivo-descarga.tar.gz';
}

Primero verificamos si la variable iContadorDeDescargas es mayor o igual que 5. Si la condición es verdadera, entonces le mostramos un mensaje al usuario indicando que ya alcanzó el límite diario de descargas. En caso contrario, sumamos un 1 al contador y le permitimos hacer la descarga. Fácil, verdad? Espero que con este ejemplo se hayan aclarado las posibles dudas.

Limitaciones de las cookies

Las cookies tienen ciertas limitaciones, entre ellas:

  • Se pueden almacenar únicamente 300 cookies en el navegador. Por ejemplo: el sitio 1 puede almacenar 200, el sitio 2 almacena 45 y el sitio 3 guarda 55, para un total de 300 cookies. El almacenamiento es compartido entre todos los sitios. Si el archivo que gestiona las cookies ya está lleno (tiene 300 cookies) entonces se eliminan automáticamente las más antiguas.
  • Cada dominio tiene la posibilidad de almacenar 20 cookies. De igual forma, al sobrepasar este límite se eliminan las más antiguas.
  • El tamaño máximo de una cookie es 4KB. Cualquier contenido que supere el límite de tamaño será omitido, es decir, solo se almacenan 4KB de datos y el resto se elimina.
  • Cuando el usuario limpia o borra el historial de navegación también puede borrar nuestras cookies. Si lo vemos con el ejemplo anterior, esto quiere decir que el usuario resetea el contador, y de esta forma podrá realizar todas las descargas diarias que desee (por esta razón mencioné que no en todos los casos se debe confiar en las cookies).

Creación de cookies con JavaScript

Para crear cookies con JavaScript debemos utilizar el objeto cookie del documento. A la hora de crear una cookie con JavaScript podemos especificar varios argumentos o parámetros, pero solo el nombre es requerido.

//crear una cookie con JavaScript
document.cookie='name=valorAsignado;expires:expiracionCadenaUTC;domain=nombreDeDominio;path=rutaDeLaCookie;secure';

Los parámetros que comúnmente se especifican cuando se hace una cookie con JavaScript o con otro lenguaje son: name y expires. En este caso, en name debe ir el nombre de la cookie y valorAsignado es lo que vamos a almacenar en la misma.

Parámetros de las cookies en JavaScript

En la siguiente tabla se especifican cuáles son los parámetros de una cookie en JavaScript y para qué sirven:

Parámetro Descripción Opcional
name Es el nombre de la cookie que vamos a almacenar en el navegador. El uso de comas, punto y coma y espacios en blanco no está permitido. Para asegurarse de que sus cookies funcionen correctamente utilice caracteres alfanuméricos (a-z, A-z, 0-9) y el guión bajo o underscore (_). NO
expires Indica cuándo debe expirar la cookie. El valor especificado en este argumento debe ser una cadena UTC (Universal Coordinated Time), el cual puede establecer usando los métodos toUTCString() o toGMTString() del objeto Date. Si este valor no se especifica la cookie expirará al finalizar la sesión actual del navegador. SI
domain Indica el nombre del dominio al que pertenece la cookie. Normalmente no se utiliza. SI
path Ruta o directorio que utiliza la cookie. Al establecer el camino para una cookie, utilice barras inclinadas o slashes (/) en lugar de barras invertidas o backslashes (\) para especificar los directorios. Además, no cierre la ruta con slash al final, ejemplo: /raiz/otroDirectorio/prueba. Ejemplo de mal uso: /raiz/otroDirectorio/prueba/ (el último slash no debe ir). SI
secure Para utilizar la cookie con Secure Socket Layer (SSL) por medio del protocolo HTTPS. SI

Diferentes tiempos de expiración de una cookie JavaScript

Muchas veces es necesario mantener una cookie por días en el navegador, pero en otros casos se nos solicita que el tiempo de vida de las cookies sea un par de horas o algunos minutos.

Tiempo de expiración de una cookie en segundos usando JavaScript

En este ejemplo vemos como darle a una cookie un tiempo de vida de 45 segundos:

//objeto Date()
var objFecha=new Date();

//a la fecha actual le agregamos 45 segundos (pueden ser los segundos que ustedes quieran)
objFecha.setTime(objFecha.getTime()+(45*1000));

//convertimos la fecha a formato UTC
var strExpiracion=objFecha.toGMTString();

Tiempo de expiración de una cookie en minutos con JavaScript

En este ejemplo vemos como darle a una cookie un tiempo de vida de 15 minutos:

//objeto Date()
var objFecha=new Date();

//a la fecha actual le agregamos 15 minutos (pueden ser los minutos que necesiten)
objFecha.setTime(objFecha.getTime()+(15*60*1000));

//convertimos la fecha a formato UTC
var strExpiracion=objFecha.toGMTString();

Tiempo de expiración de una cookie JavaScript en horas

En este ejemplo vemos como darle a una cookie un tiempo de vida de 1 hora:

//objeto Date()
var objFecha=new Date();

//a la fecha actual le agregamos 1 hora (3600 segundos)
objFecha.setTime(objFecha.getTime()+(3600*1000));

//convertimos la fecha a formato UTC
var strExpiracion=objFecha.toGMTString();

Ejemplo real de cómo crear una cookie con JavaScript

Ya que sabemos lo básico para crear cookies con JavaScript podemos ver un ejemplo sencillo (siguiendo con el mismo ejemplo de las descargas que mencioné al inicio, pero esta vez, la limitación será a una hora en vez de un día):

//objeto Date()
var objFecha=new Date();

//agregamos una hora a la fecha actual
objFecha.setTime(objFecha.getTime()+(3600*1000));

//convertimos la fecha a formato UTC
var strExpiracion=objFecha.toGMTString();

//creamos la cookie llamada contadorDeDescargas (con un valor inicial de 0)
document.cookie='contadorDeDescargas=0;expires='+strExpiracion;

Nuestro cookie contadora de descargas se llama contadorDeDescargas y la hemos inicializado con un cero (el usuario no ha realizado descargas).

Continuación…

Para leer la continuación de este artículo haga clic aquí.

Escrito por Cali Rojas

Cali Rojas

Senior Front-End/Back-End Web Developer y diseñador de GUI’s, nacido en Costa Rica. Utilizo tecnologías como JavaScript Orientado a Objetos, HTML5, CSS3 y jQuery; MySQL, PHP, Python, LESS, SASS, etc. Linuxero por elección (Debian). Autor de jsmConsole (JavaScript Mobile Console) y Mopix.js (Mobile Pixel Perfect). Fundador de este blog.

VN:F [1.9.22_1171]
Rating: 2.5/5 (4 votes cast)
VN:F [1.9.22_1171]
Rating: +3 (from 3 votes)
¿Cómo usar cookies en JavaScript? Parte 1, 2.5 out of 5 based on 4 ratings

Compartir este artículo

Si le pareció interesante el contenido de este artículo, por favor, compártalo con sus amigos y conocidos por medio de las principales redes sociales.

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Artículos relacionados

Categorías: JavaScript

7 comentarios hasta el momento. Haga clic aquí para ver u ocultar los comentarios.

  1. Xucunet dice:

    Buen ejemplo de uso de cookies, pero ¿por qué bloqueas que no se pueda copiar el código? No tiene sentido que una web donde ofreces códigos no permitas copiarlos.

  2. Vega dice:

    Concuerdo con el de arriba, supongo que lo haces para evitar que te plagien pero el código deberías dejarlo al descubierto jeje, me gustó este artículo, pero al querer ver la segunda parte (donde está lo bueno)
    Plop! “Not found!” valla decepción que me llevé :(

    Si puedes recuperar la segunda parte me avisas :P

  3. Alex dice:

    Hola,

    Muy buen artículo, pero en las limitaciones existen algunos errores, te comento, el RFC2109 indica que los navegadores deben de cumplir al menos las siguientes limitaciones:
    - Al menos poder almacenar 300 cookies
    - Al menos poder almacenar 20 cookies por dominio
    - Al menos 4KB por cookie
    Eso significa que si un navegador cumple dicho estándar, puede ser que ofrezca más capacidad pero como mínimo esa no que esos sean los límites.

    Un saludo

  4. ls dice:

    y como llamo a la variable?

    joderrrrrrrrrrrr confundes

Deje un comentario

Su información personal no será compartida con otros sitios y/o personas.