Cookies через Vex

Библиотека Vex предоставляет удобный интерфейс для взаимодействия с cookies в браузере, позволяя создавать, получать и удалять данные без необходимости ручной работы с document.cookie. Работа с cookies через Vex упрощает управление пользовательскими данными и настройками на стороне клиента.

Создание и установка cookies

Для создания cookie используется метод Vex.cookie.set(). Он позволяет задать имя, значение, а также дополнительные параметры, такие как срок жизни, путь и домен.

Синтаксис:

Vex.cookie.set(name, value, options);

  • name — строка, имя cookie.

  • value — строка, значение cookie.

  • options — объект с параметрами:

    • expires — срок действия cookie в днях.
    • path — путь, для которого действует cookie (по умолчанию /).
    • domain — домен, на котором cookie доступна.
    • secure — булевый параметр, указывающий, что cookie будет передаваться только по HTTPS.

Пример установки cookie на 7 дней:

Vex.cookie.set('userToken', 'abc123', { expires: 7, path: '/' });

Здесь cookie userToken будет доступна на всём сайте в течение 7 дней.

Метод Vex.cookie.get() используется для извлечения значения cookie по имени. Если cookie не существует, возвращается null.

Синтаксис:

let value = Vex.cookie.get(name);

Пример получения значения cookie:

let token = Vex.cookie.get('userToken');
console.log(token); // 'abc123'

Метод автоматически декодирует значение cookie, что исключает необходимость использовать decodeURIComponent.

Удаление cookies

Удаление cookie выполняется методом Vex.cookie.remove(). При удалении важно указывать тот же path и domain, которые использовались при создании cookie, иначе удаление может не сработать.

Синтаксис:

Vex.cookie.remove(name, options);
  • options — объект с параметрами path и domain.

Пример удаления cookie:

Vex.cookie.remove('userToken', { path: '/' });

После выполнения этого кода cookie userToken перестанет существовать на сайте.

Работа с JSON в cookies

Vex поддерживает хранение объектов в cookie с помощью сериализации в JSON. Для этого достаточно использовать методы JSON.stringify и JSON.parse.

Пример сохранения объекта в cookie:

const user = { id: 1, name: 'Alice', role: 'admin' };
Vex.cookie.set('userData', JSON.stringify(user), { expires: 3 });

Извлечение и преобразование обратно в объект:

let storedUser = Vex.cookie.get('userData');
if (storedUser) {
    storedUser = JSON.parse(storedUser);
    console.log(storedUser.name); // 'Alice'
}

Использование JSON позволяет хранить сложные структуры данных, такие как массивы и объекты, без потери информации.

Настройка сроков жизни cookies

Срок действия cookie указывается в днях через параметр expires. Если параметр опущен, cookie будет сессионной и удалится после закрытия браузера. Для точной работы с временем можно использовать объект Date и преобразовать его в UTC:

const date = new Date();
date.setTime(date.getTime() + (2 * 24 * 60 * 60 * 1000)); // 2 дня
Vex.cookie.set('sessionId', 'xyz789', { expires: date });

Vex автоматически преобразует дату в корректный формат для заголовка Set-Cookie.

Работа с безопасными и HttpOnly cookies

  • Secure — cookie будет передаваться только по HTTPS:
Vex.cookie.set('secureToken', 's3cur3', { secure: true });
  • HttpOnly — напрямую через Vex установить нельзя, так как это свойство влияет на доступность cookie с JavaScript и устанавливается сервером. Однако Vex полностью поддерживает работу с обычными и безопасными cookies, которые доступны на клиенте.

Массовое удаление и фильтрация

Vex не имеет встроенного метода для удаления всех cookies одновременно, но это можно реализовать с помощью перебора:

const allCookies = document.cookie.split(';');
allCookies.forEach(cookie => {
    const name = cookie.split('=')[0].trim();
    Vex.cookie.remove(name, { path: '/' });
});

Этот метод позволяет очистить все cookies на текущем домене, учитывая путь.

Практические рекомендации

  • Для безопасного хранения токенов аутентификации лучше использовать серверные HttpOnly cookies.
  • Для временных настроек пользовательского интерфейса и предпочтений подходят клиентские cookies с коротким сроком действия.
  • Всегда указывайте path и при необходимости domain, чтобы избежать проблем с удалением и перезаписью cookies.
  • Для хранения сложных данных используйте сериализацию в JSON и проверку наличия cookie перед чтением.

Поддержка кодировок и специальных символов

Vex автоматически обрабатывает кодирование значений cookies с помощью encodeURIComponent при установке и decodeURIComponent при чтении. Это гарантирует корректное хранение символов, пробелов и специальных символов:

Vex.cookie.set('greeting', 'Привет, мир!');
console.log(Vex.cookie.get('greeting')); // 'Привет, мир!'

Интеграция с другими библиотеками

Vex легко комбинируется с любыми фреймворками JavaScript, такими как React, Vue или Angular. Основная практика — управлять cookies в сервисах состояния или утилитах, вызывая методы Vex для синхронизации данных между компонентами и браузером.

Эта структура работы с cookies через Vex позволяет создавать гибкие, безопасные и удобные решения для хранения данных на клиенте, сокращая количество ручного кода и минимизируя ошибки при работе с document.cookie.

Оглавление