Работа с куки в JavaScript

29.02.20

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";

Напрямую работать со строкой не очень удобно. Лучше работать с куками с помощью функций.

Получить куки

function getCookie(name) {

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

Установить куки

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
  })
}

 

blog comments powered by Disqus