setCookies y getCookies

Cómo añadir y obtener cookies con JavaScript sin utilizar ninguna librería externa.

setcookies-getcookies-vanilla-javascript

En el mundo de internet y específicamente en el de los navegadores web, una cookie (o galleta) sirve para describir una forma de guardar información sobre tu sesión para que persista en el tiempo y pueda usarse en el futuro.

Lou Montulli, desarrollador web de la empresa Netscape Communications, uno de los primeros navegadores, tuvo la idea en 1994 de usar archivos de texto para guardar información del usuario. Concretamente quería guardar la lista de compra virtual en el ordenador de los visitantes de su web.

Actualmente existen más tecnologías para guardar información en el navegador, como localStorage, sessionStorage, etc. Cada cuál con sus respectivos casos de uso. Aun así, hoy en día las cookies se siguen usando. En este artículo veremos cómo podemos manejar las cookies sin librerías externas.

Obtener una cookie por nombre

Si ejecutamos el código JavaScript en un navegador

document.cookie

Obtendremos una cadena de texto con todas las cookies de la página. Si hay cookies estas estarán en el formato:

KEY=VALUE; KEY1=VALUE1; KEY2=VALUE2"

Por lo tanto, para extraer un valor de la cookie, bastará con dividir y parsear el texto para convertirlo en un objeto JavaScript.

const getCookie = (key) => {
const cookies = document.cookie.split(';');
for (let cookie of cookies) {
cookie = cookie.trim();
if (cookie.startsWith(`${key}=`)) {
return cookie.substring(key.length + 1);
}
}
return null;
}
getCookie('KEY1');

Añadir una cookie

Para añadir una cookie sólo es necesario añadir una cadena de texto a document.cookie con el formato KEY=VALUE. Pero para añadir más elementos sin sobreescribir las existentes y queremos configurar opciones como la fecha de expiración, etc. podemos usar:

const setCookie = (name, value, options = {}) => {
options = {
path: '/',
...options
};
if (options.expires === undefined) {
options.expires = new Date();
options.expires.setDate(options.expires.getDate() + 30);
}
if (options.expires.toUTCString) {
options.expires = options.expires.toUTCString();
}
let updatedCookie = encodeURIComponent(name) + "=" + encodeURIComponent(value);
for (const key in options) {
updatedCookie += "; " + key;
const optionValue = options[key];
if (optionValue !== true) {
updatedCookie += "=" + optionValue;
}
}
document.cookie = updatedCookie;
};
const date = new Date();
date.setDate(10); // modifica la fecha al día 10 cuando expirará la cookie
setCookie('name', 'value', {expires: date});

Para ver los parámetros a añadir puedes consultar esta documentación en https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie.

Borrar cookie

Reaprovechamos la función de setCookie para poner el valor a cadena de texto vacía '' y un max-age negativo para indicar al navegador que la cookie puede ser borrada.

const deleteCookie = (name) => {
setCookie(name, '', {
'max-age': -1,
'expires': new Date()
})
}