Робота з файлами cookie в JavaScript

Cookie (cookie, web cookie або cookie браузера) – це рядкова інформація, яку можна зберігати в браузері і передавати на сервер.

Максимальний розмір для однієї куки – 4096 байт. Кількість кук для одного домену може бути від 20 до 242 залежно від браузера.

Записуються куки у вигляді рядка, але за принципом ключ – значення.

document.cookie = "username=John Brown";

Куки можуть містити в собі параметри

path

path=/admin;

Для встановлення доступу лише на певних сторінках. За промовчанням встановлюється для поточної сторінки.

domain

domain=example.com;

Встановлює домен. За відсутності доступ до піддоменів неможливий. За замовчуванням відсутня. Тобто для доступу до однієї куки на sub.site.com і site.com необхідно встановити domain=site.com;

max-age

expires

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

Вказує дату рядком у форматі GMT. Можна отримати за допомогою Date.toUTCString(). Дата закінчення терміну життя куки, після якої браузер її видалить.

max-age=3600

Альтернатива expires. Вказується за секунди. Якщо значення max-age 0 або менше, кука видаляється. За промовчанням ні expires, ні max-age не встановлено, і кука живе лише до моменту закриття браузера.

secure

secure;

Налаштування дозволяє передавати куку лише за https протоколом.

samesite

SameSite=Strict;

або

SameSite=Lax;

Ще одне налаштування безпеки. Від CSRF атаки.

Приклад параметрів

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

Прямо працювати з рядком не дуже зручно. Найкраще працювати з куками за допомогою функцій.

Отримати cookie

function getCookie(name) {

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

Встановити 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;
}

Видалити куки

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