Использование cookies

Cookies — это небольшие текстовые файлы, которые веб-сервер сохраняет на устройстве пользователя для хранения информации о сессии, предпочтениях или других данных. В контексте библиотеки Intro.js cookies часто используются для запоминания того, проходил ли пользователь интерактивный тур или подсказку, чтобы при повторном посещении страницы не показывать её повторно.

Основные свойства cookies

Cookies состоят из пары ключ-значение и могут содержать дополнительные параметры:

  • expires — дата истечения срока действия cookie.
  • max-age — время жизни cookie в секундах.
  • path — путь на сайте, для которого действует cookie.
  • domain — домен, для которого cookie действительно.
  • secure — флаг, разрешающий передачу cookie только по HTTPS.
  • SameSite — политика доступа к cookie с разных сайтов (Strict, Lax, None).

Пример простого cookie:

document.cookie = "introSeen=true; max-age=31536000; path=/";

Здесь устанавливается cookie introSeen со значением true, срок действия — один год, доступен на всем сайте.

Чтение cookies

В JavaScript для чтения cookie используется document.cookie, который возвращает строку вида:

"key1=value1; key2=value2; key3=value3"

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

function getCookie(name) {
    const cookies = document.cookie.split("; ");
    for (let cookie of cookies) {
        const [key, value] = cookie.split("=");
        if (key === name) return decodeURIComponent(value);
    }
    return null;
}

const introSeen = getCookie("introSeen");

Эта функция ищет cookie по имени и возвращает его значение или null, если cookie не найден.

Удаление cookies

Для удаления cookie его нужно переписать с пустым значением и истекшим сроком действия:

document.cookie = "introSeen=; max-age=0; path=/";

Это гарантирует, что cookie станет недействительным и браузер удалит его.

Cookies и Intro.js

Intro.js позволяет управлять поведением туров с помощью cookies. Основная цель — запомнить, что пользователь уже прошёл тур, чтобы не повторять его при следующих визитах.

Пример интеграции
// Проверка, показывать ли тур
if (!getCookie("introSeen")) {
    introJs().start();
    document.cookie = "introSeen=true; max-age=31536000; path=/";
}

В этом примере:

  1. Проверяется наличие cookie introSeen.
  2. Если cookie нет, запускается интерактивный тур Intro.js.
  3. После завершения тура устанавливается cookie на год, чтобы при следующем посещении тур не запускался.

Можно расширить управление, сохраняя разные состояния туров:

function startTour(tourName) {
    if (!getCookie(tourName)) {
        introJs().start();
        document.cookie = `${tourName}=true; max-age=31536000; path=/`;
    }
}

startTour("homepageIntro");
startTour("settingsIntro");

Таким образом можно запускать несколько туров на одном сайте, независимо отслеживая, какие из них пользователь уже прошёл.

Безопасность и рекомендации

  • Не хранить чувствительные данные в cookies, особенно связанные с авторизацией.
  • Использовать Secure для HTTPS-сайтов и SameSite для защиты от CSRF.
  • Для больших данных или более сложного состояния туров лучше использовать localStorage или серверное хранение, а cookies использовать только для простого флага, например, прошёл тур или нет.

Интеграция с локализацией и динамическим контентом

При изменении языка сайта или обновлении интерфейса можно хранить cookie с версией тура:

const tourVersion = "v2";
if (getCookie(`introSeen_${tourVersion}`) !== "true") {
    introJs().start();
    document.cookie = `introSeen_${tourVersion}=true; max-age=31536000; path=/`;
}

Это позволяет показывать обновлённые подсказки пользователям, которые уже проходили старые версии туров, не нарушая пользовательский опыт.

Использование сторонних библиотек для работы с cookies

Для упрощения работы с cookies можно использовать небольшие библиотеки:

  • js-cookie — удобная API для создания, чтения и удаления cookies.
Cookies.set('introSeen', 'true', { expires: 365, path: '/' });
const seen = Cookies.get('introSeen');
Cookies.remove('introSeen');
  • TinyCookie — минималистичный вариант для лёгких проектов.

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

Итоговое применение

Сочетание Intro.js с cookie позволяет создать персонализированный опыт пользователя: показывать интерактивные подсказки только при необходимости, управлять версиями туров, интегрировать локализацию и минимизировать навязчивость интерфейса. Эффективное управление cookie становится ключевым инструментом для улучшения взаимодействия с сайтом без дублирования информации или раздражения пользователей.

Оглавление