Cookies en JavaScript: Como utilizarlas

Las cookies son un archivo con datos que se coloca en el navegador y que contienen información sobre el usuario que visita una determinada página web. En este artículo vemos cómo funcionan las cookies en Javascript, cuáles son sus principales parámetros y cómo crearlas, modificarlas o eliminarlas.

Cookies JavaScript: conceptos

Las obligaciones sobre políticas de cookies en 2021 se han actualizado para maximizar la privacidad de los usuarios. Lo que no ha cambiado es la forma de crear, modificar o eliminar cookies en lenguajes de programación como Javascript.

Las cookies.Js se definen por una serie de parámetros, los cuáles se implementan a través de código Js. Entre ellos está el «nombre-valor», el cual contiene la información a almacenar, una fecha de expiración que determina la fecha de validez de la cookie o el dominio y la ruta a la cual se envía. Pero veamos más a fondo estos conceptos y cómo se han de incluir en el código de la cookie.

Document.cookie

Mediante esta propiedad de pueden crear, modificar, eliminar y leer cookies en Javascript. Dentro de ella se incluyen diversos parámetros, como los que vemos a continuación.

Name-Value

Es un parámetro obligatorio a la hora de crear la cookies. «Name» se refiere al nombre que se adjudica a la cookies, mientras que «value» representa su valor. Por ejemplo, «name» podría ser «color_favorito» y «value» podría ser «azul». Una de las principales diferencias a la hora de crear cookies en PHP. y en Javascript es que en Javascript se puede crear una cookie asignándole un valor vacío.

Expire date

Este parámetro establece una fecha de final de validez de la cookie. La fecha se ha de establecer en formato UTC.

Otro parámetro temporal es «max-age«, que establece la duración en segundos de la cookie.

En caso de no asignar ningún valor para estos parámetros, se creará una cookie de sesión que espirará cuando el usuario finalice la sesión.

Si se establece una fecha de validez anterior a la fecha actual, o se asigna un valor negativo en «max-age«, lo que se conseguirá es eliminar la cookie.

Domain & Path

Básicamente se trata de la URL para la cual la cookie es válida. En el caso de «Domain» se refiere al dominio, mientras que «Path» es el subdominio.

Debes tener en cuenta que la directiva same-origin policy no permite crear cookies para un dominio diferente al que crea la propia cookie. En el caso de los subdominios, se debe indicar para cuál se desea asignar la cookie. En caso de no asignar ninguna ruta, se creará automáticamente para la ruta de la página actual.

SetCookie

Con este script se crea una variable para una función con diferentes parámetros, principalmente el nombre de la cookie, su valor, y su período de validez. Como te hemos dicho anteriormente, si no se especifica la fecha se creará una session cookie, y si la fecha es anterior a la actual, la cookie se elimina.

GetCookie

Se trata de crear una función que devuelve el valor de una cookie determinada.

Se toma el nombre de la cookie como parámetro (cname) y se crear una variable (name) con el texto a buscar (cname + «=»).

Se despliega document.cookie en semicolumnas en un array llamado ca (ca = decodedCookie.split(‘;’)).

Si la cookie es encontrada (c.indexOf(name) == 0), devuelve el valor de la cookie (c.substring(name.length, c.length). En caso contrario, devuelve «» (vacío).

¿Cómo crear una cookie con Javascript?

Para guardar cookies en Javascript hay que definir el código y los parámetros de dicha cookie, y asignarlos a document.cookie.

• document.cookie = «nombrecookie=valorcookie; max-age=7200; path=/»

Para crear más cookies es necesario seguir este mismo proceso para cada una de ellas. Ten en cuenta que si creas una cookie con el mismo nombre y para la misma ruta que una ya existente ésta sustituirá a la anterior.

¿Cómo leer una cookie con Javascript?

Uno de los puntos negativos de las cookies en Javascript es que no hay una manera de leer o encontrar cookies de manera individual. Para leer cookies en Javascript hay que crear un string que incluya todas las cookies válidas del documento, y manipularlo de manera que se encuentre el nombre y valor de la cookie que buscas.

El código para hacerlo es el siguiente

• var lasCookies = document.cookie;

Y los resultados se mostrarán de la siguiente manera:

• «cookie1=valor1;cookie2=valor2;cookie3=valor3;cookie4=valor4;….

¿Cómo Cambiar una cookie con Javascript?

Cuando se crear una cookie, se añade automáticamente a la lista de cookie del documento. Esto sucede así salvo que ya exista una cookie con el mismo nombre. En ese caso, en lugar de añadir una nueva cookie se modificará la ya existente.

Hay algunas cookie que se crean para determinadas rutas o subdominios. Para actualizar cookies en Javascript, es importante crear una cookie con el mismo identificador y también con el mismo «domain» y «path«. De lo contrario, aunque el identificador sea el mismo, se creará una nueva cookie, por lo que existirán dos cookies válidas con el mismo identificador, pero para dos rutas distintas.

¿Cómo eliminar una cookie con Javascript?

Existen dos maneras de eliminar una cookie en Javascript. La primera de ellas es establecer una fecha de caducidad («expires») anterior a la actual. La otra es asignar un período máximo de duración («max-age«) inferior a cero. Es importante tener en cuenta que en este caso no es necesario asignarle un valor a la cookie, porque esta se va a eliminar, pero SÍ hay que asignarle un nombre, para identificar la cookie que se quiere eliminar. Lógicamente, eliminando una cookie en Javascript se elimina la información que ésta pudiera estar obteniendo.

Ejemplo de cookie en JavaScrip

Veamos un ejemplo de cómo crear una cookie sencilla en Javascript que nos indique que el color favorito del usuario es el azul, el tiempo de permanencia de la cookie será una hora y la ruta será el Blog de la web.

Como ya hemos dicho, estos parámetros se han de asignar dentro de la propiedad document.cookie. El código en bruto sería el siguiente:

• document.cookie = «nombrecookie=valorcookie; max-age=»»; path=/»

Ahora solo tenemos que asignar los valor deseados a cada parámetro (ten en cuenta que «max-age» determina la duración de la cookie en segundos):

• document.cookie = «color_favorito=azul; max-age=3600; path=/blog»

Con esto llegamos al final de nuestro artículo. En nuestra web tienes más información relacionada, por ejemplo sobre el uso de cookies en WordPress.