run-dev

cookie в JavaScript: работа с куками в JS

cookie — это небольшой фрагмент данных, который браузер хранит на стороне клиента и отправляет на сервер при каждом запросе к тому же домену. В JavaScript к кукам можно получить доступ через свойство document.cookie, а также устанавливать и удалять их прямо из кода.

Чтение кук

Свойство document.cookie содержит все куки для текущей страницы в виде одной строки, где каждая пара ключ-значение разделена точкой с запятой:

console.log(document.cookie);

Например, если в браузере установлены куки:

user=Alice; theme=dark

Результат будет:

user=Alice; theme=dark

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

Для создания новой куки в document.cookie присваивается строка, содержащая пару ключ-значение и опции:

document.cookie = 'user=Alice';

Куки также могут содержать дополнительные параметры:

document.cookie = 'theme=dark; path=/; expires=Tue, 01 Jan 2030 00:00:00 GMT';

Основные параметры куки

  • path — определяет, для каких путей кука будет доступна.
  • expires — дата истечения срока действия куки.
  • max-age — срок действия куки в секундах.
  • secure — кука будет отправляться только по HTTPS.
  • samesite — ограничивает отправку куки при кросс-доменных запросах (значения: Strict или Lax).

Пример куки с параметрами:

document.cookie = 'session=abc123; path=/; max-age=3600; secure; samesite=lax';

Получение куки по ключу

Так как document.cookie возвращает все куки одной строкой, их нужно вручную разбирать:

function getCookie(name) {
    const cookies = document.cookie.split('; ');
    for (const cookie of cookies) {
        const [key, value] = cookie.split('=');
        if (key === name) {
            return value;
        }
    }
    return null;
}
console.log(getCookie('user')); // Alice

Удаление куки

Для удаления куки устанавливается дата истечения в прошлом:

document.cookie = 'user=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';

Особенности работы с куками

  • Доступны только куки, относящиеся к текущему домену и пути.
  • Куки, установленные сервером с флагом HttpOnly, недоступны из JavaScript.
  • Размер одной куки ограничен примерно 4 КБ.
  • Браузеры могут ограничивать общее количество кук на домен (обычно около 50-100 штук).

Пример полного управления куками

function setCookie(name, value, options = {}) {
    let cookie = `${name}=${value}`;

    if (options.path) cookie += `; path=${options.path}`;
    if (options.expires) cookie += `; expires=${options.expires.toUTCString()}`;
    if (options['max-age']) cookie += `; max-age=${options['max-age']}`;
    if (options.secure) cookie += `; secure`;
    if (options.samesite) cookie += `; samesite=${options.samesite}`;

    document.cookie = cookie;
}

setCookie('user', 'Alice', { path: '/', 'max-age': 3600 });

Куки в JavaScript — это простой способ сохранять данные на клиенте между запросами, например, для авторизации или сохранения пользовательских настроек. Несмотря на появление более современных инструментов вроде localStorage и sessionStorage, куки остаются важным механизмом для работы с HTTP и обеспечения совместимости со старыми системами.

Больше записей