Куки в JavaScript: Как использовать и управлять

Сегодня поговорим о куки в JavaScript. Куки (cookies) — это маленькие текстовые файлы, которые веб-сайты могут сохранять на устройстве пользователя для хранения данных между сеансами. Они часто используются для хранения информации о пользователях, таких как предпочтения, данные авторизации и многое другое.

1. Создание куки

Для создания куки используется свойство document.cookie. Пример создания куки:

javascriptКопировать код
document.cookie = "username=JohnDoe; path=/; expires=Fri, 31 Dec 2024 23:59:59 GMT";

username=JohnDoe — имя и значение куки.
path=/ — путь, для которого куки действительны.
expires — дата истечения срока действия куки.

2. Чтение куки

Чтобы прочитать куки, также используется свойство document.cookie. Оно возвращает строку всех куки для текущего документа.

javascriptКопировать код
const cookies = document.cookie;
console.log(cookies);

Для удобного извлечения значения конкретного куки можно написать функцию:

javascriptКопировать код
function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
}

const username = getCookie('username');
console.log(username);

3. Обновление куки

Для обновления куки необходимо снова установить его с новым значением и тем же именем.

javascriptКопировать код
document.cookie = "username=JaneDoe; path=/; expires=Fri, 31 Dec 2024 23:59:59 GMT";

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

Чтобы удалить куки, нужно установить его с истекшим сроком действия.

javascriptКопировать код
document.cookie = "username=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";

5. Параметры безопасности

Для повышения безопасности куки можно использовать параметры Secure и HttpOnly.

Secure: Куки будет передаваться только по HTTPS.
HttpOnly: Куки недоступны через JavaScript, только на стороне сервера.

Пример:

javascriptКопировать код
document.cookie = "username=JohnDoe; path=/; expires=Fri, 31 Dec 2024 23:59:59 GMT; Secure; HttpOnly";

Пример использования куки

Создадим небольшой пример для демонстрации работы с куки:

htmlКопировать код
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cookie Example</title>
</head>
<body>
    <script>
        // Установка куки
        document.cookie = "username=JohnDoe; path=/; expires=Fri, 31 Dec 2024 23:59:59 GMT";
        
        // Получение куки
        function getCookie(name) {
            const value = `; ${document.cookie}`;
            const parts = value.split(`; ${name}=`);
            if (parts.length === 2) return parts.pop().split(';').shift();
        }

        const username = getCookie('username');
        console.log(`Username: ${username}`);

        // Обновление куки
        document.cookie = "username=JaneDoe; path=/; expires=Fri, 31 Dec 2024 23:59:59 GMT";

        // Удаление куки
        document.cookie = "username=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";
    </script>
</body>
</html>

Заключение

Куки — это мощный инструмент для хранения данных на стороне клиента. Они позволяют сохранять данные между сеансами и могут быть полезны для множества задач, таких как управление сессиями пользователей и сохранение пользовательских предпочтений.