Trabajar con cookies en JavaScript

Сookie (cookie web o cookie del navegador) es una cadena de información que puede almacenarse en un navegador y enviarse al servidor.

El tamaño máximo para una cookie es 4096 bytes. El número de cookies para un dominio puede ser de 20 a 242, dependiendo del navegador.

Las cookies se escriben como una cadena, pero en función de la clave de valor.

document.cookie = "username=John Brown";

Las cookies pueden contener parámetros

path

path=/admin;

Para establecer el acceso solo en ciertas páginas. El valor predeterminado es para la página actual.

domain

domain=example.com;

Establece el dominio. En ausencia de acceso a subdominios no es posible. Por defecto está ausente. Es decir, para acceder a la misma cookie en sub.site.com y site.com, debe establecer domain = site.com;

max-age

expires

expires=Sat, 29 Feb 2020 14:00:00 GMT;

Indica la fecha por una cadena en formato GMT. Se puede obtener usando Date.toUTCString(). La fecha de vencimiento de la cookie después de la cual el navegador la eliminará.

max-age=3600

Alternativa a expires. Indicado en segundos. Si el valor de max-age es 0 o menos, la cookie se elimina. Por defecto, ni expires ni max-age están configurados, y la cookie solo vive hasta que se cierra el navegador.

secure

secure;

La configuración le permite transferir cookies solo a través del protocolo https.

samesite

SameSite=Strict;

o

SameSite=Lax;

Otra configuración de seguridad. Del ataque CSRF.

Parámetros de ejemplo

document.cookie = "username=John Brown; path=/; domen=site.com; max-age=3600";

Trabajar directamente con la cadena no es muy conveniente. Es mejor trabajar con cookies utilizando funciones.

Consigue una cookie

function getCookie(name) {

    let matches = document.cookie.match(new RegExp(
      "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
    ))
    return matches ? decodeURIComponent(matches[1]) : undefined
}

Establecer cookie

function setCookie(name, value, options = {}) {

  options = {
    path: '/',
    ...options
  };

  if (options.expires instanceof Date) {
    options.expires = options.expires.toUTCString();
  }

  let updatedCookie = encodeURIComponent(name) + "=" + encodeURIComponent(value);

  for (let optionKey in options) {
    updatedCookie += "; " + optionKey;
    let optionValue = options[optionKey];
    if (optionValue !== true) {
      updatedCookie += "=" + optionValue;
    }
  }

  document.cookie = updatedCookie;
}

Eliminar cookie

function deleteCookie(name) {
  setCookie(name, "", {
    'max-age': -1
  })
}