НейроАгент

jQuery Cookie: Установка, получение и удаление

Изучите, как устанавливать, получать и удалять куки с помощью jQuery в нашем полном руководстве. Включает примеры кода, лучшие практики и плагин jQuery cookie для управления куками.

#browser-storage #cookie-management #frontend-tutorial #javascript-cookies #jquery-cookies #jquery-plugins #web-development

06.11.2025, 18:31

Вопрос

Как установить и удалить cookie с помощью jQuery? Например, как создать cookie с именем test и установить его значение в 1?

НейроАгент

Чтобы установить cookie с именем “test” и значением “1” с помощью jQuery, можно использовать плагин jQuery cookie с помощью $.cookie("test", 1), а для удаления использовать $.removeCookie("test"). Этот подход обеспечивает простой и стандартизированный способ управления cookie браузера с встроенной поддержкой времени истечения, пути, домена и параметров безопасности. Плагин cookie обрабатывает все сложности манипуляции cookie, сохраняя кросс-браузерную совместимость и правильное кодирование.

Использование плагина jQuery Cookie
Установка Cookie с параметрами
Получение значений Cookie
Удаление или удаление Cookie
Полный пример реализации
Лучшие практики и рекомендации

Наиболее распространенным и надежным подходом для манипуляции cookie с помощью jQuery является использование специализированного плагина cookie. Плагин jQuery Cookie предоставляет простой интерфейс для чтения, записи и удаления cookie.

Для начала вам нужно включить в ваш HTML как jQuery, так и плагин cookie:

html

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

После загрузки установка cookie становится простой. Для вашего конкретного примера создания cookie с именем “test” и значением “1”:

javascript

$.cookie("test", 1);

Этот базовый синтаксис устанавливает cookie, который сохраняется до окончания сеанса браузера. Плагин автоматически обрабатывает URL-кодирование и правильное форматирование строки cookie, делая его более надежным, чем ручная манипуляция cookie.

Плагин jQuery Cookie широко используется и хорошо документирован, что делает его безопасным выбором для производственных приложений. Согласно Stack Overflow, это был стандартный подход для манипуляции cookie на основе jQuery.

Для большего контроля над вашими cookie плагин jQuery поддерживает различные параметры, которые можно передать в качестве третьего аргумента. Эти параметры включают время истечения, путь, домен и параметры безопасности.

Вот как установить cookie с несколькими параметрами:

javascript

$.cookie("test", 1, {
    expires: 7,           // Cookie истекает через 7 дней
    path: "/",            // Cookie доступен на всем сайте
    domain: "example.com", // Cookie доступен для этого домена
    secure: true          // Cookie отправляется только по HTTPS
});

Общие параметры Cookie

expires: Может быть числом (дни от текущей даты) или объектом Date
path: Строка, указывающая путь, для которого доступен cookie (по умолчанию текущий путь)
domain: Строка, указывающая домен, для которого доступен cookie
secure: Булево значение, указывающее, должен ли cookie отправляться только по HTTPS
raw: Булево значение, указывающее, должно ли значение cookie не кодироваться в URI

Как показано в уроке SitePoint, можно создавать cookie с разными временами истечения:

javascript

// Cookie, который истекает через 10 дней
$.cookie("test", 1, { expires: 10 });

// Cookie, который истекает в конкретную дату
var expiryDate = new Date();
expiryDate.setDate(expiryDate.getDate() + 7);
$.cookie("test", 1, { expires: expiryDate });

Использование параметра max-age предоставляет альтернативу expires:

javascript

// Установить cookie с истечением через 30 дней (30 * 24 * 60 * 60 секунд)
document.cookie = "test=1; max-age=" + (30 * 24 * 60 * 60) + "; path=/";

Чтение значений cookie так же просто, как и их установка. Чтобы получить значение ранее установленного cookie:

javascript

var cookieValue = $.cookie("test");
console.log(cookieValue); // Вывод: 1

Если вы попытаетесь прочитать cookie, который не существует, плагин вернет undefined:

javascript

var nonExistentCookie = $.cookie("nonexistent");
console.log(nonExistentCookie); // Вывод: undefined

В документации SitePoint объясняется, что чтение cookie просто - вы просто вызываете $.cookie() с именем cookie в качестве единственного параметра.

Для более сложных сценариев можно прочитать все cookie одновременно:

javascript

var allCookies = $.cookie();
console.log(allCookies); // Возвращает объект со всеми cookie

Это возвращает объект, где ключи - это имена cookie, а значения - соответствующие значения cookie, что упрощает программную работу с несколькими cookie.

Чтобы удалить cookie, используется метод $.removeCookie(). Это правильный способ удаления cookie с помощью плагина jQuery:

javascript

$.removeCookie("test");

При удалении cookie важно указать тот же путь и домен, которые использовались при создании cookie, в противном случае удаление может не сработать:

javascript

// Удалить cookie с конкретным путем
$.removeCookie("test", { path: "/" });

// Удалить cookie с доменом
$.removeCookie("test", { domain: "example.com" });

Согласно ответу на Stack Overflow, стандартный шаблон:

javascript

// Установить cookie
$.cookie("test", 1);

// Удалить cookie
$.removeCookie("test");

Альтернативный подход с использованием JavaScript

Если вы предпочитаете не использовать плагин, можно работать с cookie с помощью нативного JavaScript, но это требует больше ручной обработки:

javascript

// Установить cookie
function setCookie(name, value, days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + value + expires + "; path=/";
}

// Получить cookie
function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) === ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

// Удалить cookie
function eraseCookie(name) {
    document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';
}

Полный пример реализации

Вот полный, практический пример, демонстрирующий установку, получение и удаление cookie с помощью jQuery:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Пример jQuery Cookie</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
</head>
<body>
    <h1>Демонстрация jQuery Cookie</h1>
    <button id="setCookie">Установить Cookie (test=1)</button>
    <button id="getCookie">Получить значение Cookie</button>
    <button id="removeCookie">Удалить Cookie</button>
    <div id="result"></div>

    <script>
        $(document).ready(function() {
            // Кнопка установки cookie
            $("#setCookie").click(function() {
                $.cookie("test", 1, { expires: 7 });
                $("#result").html("Cookie 'test' установлен со значением 1");
            });

            // Кнопка получения cookie
            $("#getCookie").click(function() {
                var value = $.cookie("test");
                if (value !== undefined) {
                    $("#result").html("Значение cookie 'test': " + value);
                } else {
                    $("#result").html("Cookie 'test' не существует");
                }
            });

            // Кнопка удаления cookie
            $("#removeCookie").click(function() {
                $.removeCookie("test");
                $("#result").html("Cookie 'test' удален");
            });
        });
    </script>
</body>
</html>

Этот интерактивный пример демонстрирует все три операции:

Установку cookie с истечением через 7 дней
Чтение значения cookie и его отображение
Полное удаление cookie

Вы можете протестировать этот код, чтобы увидеть, как cookie работают на практике, и изменить значения и параметры в соответствии с вашими конкретными потребностями.

Лучшие практики и рекомендации

При работе с cookie в jQuery учитывайте эти лучшие практики:

Вопросы безопасности

Всегда используйте параметр secure: true для cookie, содержащих чувствительные данные
Учитывайте атрибут SameSite для предотвращения атак CSRF (современные браузеры поддерживают это)
Будьте осторожны с большими значениями cookie, так как они имеют ограничения по размеру (обычно 4КБ на cookie)

Вопросы производительности

Минимизируйте количество используемых cookie
Держите значения cookie как можно меньше
Используйте подходящие времена истечения, чтобы избежать накопления устаревших cookie

Совместимость с браузерами

Плагин jQuery cookie работает во всех современных браузерах
Тестируйте в разных браузерах для обеспечения согласованности поведения
Учитывайте серверные резервные копии для критически важного функционала

Альтернативные библиотеки

Хотя плагин jQuery cookie является отличным выбором, рассмотрите современные альтернативы, такие как js-cookie, для более активной поддержки и дополнительных функций:

javascript

// Использование библиотеки js-cookie
Cookies.set('test', 1, { expires: 7 });
Cookies.get('test'); // Возвращает '1'
Cookies.remove('test');

Как указано в репозитории GitHub, оригинальный плагин jQuery cookie больше не поддерживается и был заменен на js-cookie, хотя он остается функциональным для существующих проектов.

Помните: Cookie хранятся на стороне клиента и могут быть изменены или удалены пользователями. Никогда не храните чувствительную информацию в cookie без соответствующего шифрования и мер безопасности.

Источники

Заключение

Установка и удаление cookie с помощью jQuery является простой задачей при использовании специализированного плагина cookie. Для вашего конкретного примера создания cookie с именем “test” и значением “1” просто используйте $.cookie("test", 1) для установки и $.removeCookie("test") для удаления. Плагин обрабатывает все сложности манипуляции cookie, предоставляя параметры для истечения, пути, домена и настроек безопасности.

Ключевые выводы:

Используйте $.cookie(name, value) для установки базовых cookie
Используйте $.removeCookie(name) для удаления cookie
Добавляйте параметры, такие как { expires: 7, path: "/" } для большего контроля
Включайте в HTML как jQuery, так и плагин cookie
Учитывайте безопасность при работе с cookie

Для современных проектов рассмотрите возможность использования библиотеки js-cookie в качестве альтернативы плагину jQuery cookie, хотя подход jQuery остается полностью функциональным для существующих реализаций. Всегда тестируйте поведение cookie в разных браузерах и учитывайте ограничения по размеру cookie и лучшие практики безопасности.

Как установить время истечения для cookie с помощью jQuery?В чем разница между сессионными и постоянными cookie в jQuery?Как можно установить несколько cookie одновременно с помощью jQuery?Какие соображения безопасности следует учитывать при использовании cookie jQuery?Как проверить, существует ли cookie перед его чтением с помощью jQuery?Можно ли использовать cookie jQuery с современными JavaScript фреймворками, такими как React или Vue?

Спросить у NeuroAgent

jQuery Cookie: Установка, получение и удаление

Использование плагина jQuery Cookie

Установка Cookie с параметрами

Общие параметры Cookie

Получение значений Cookie

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

Альтернативный подход с использованием JavaScript

Полный пример реализации

Лучшие практики и рекомендации

Вопросы безопасности

Вопросы производительности

Совместимость с браузерами

Альтернативные библиотеки

Источники

Заключение