Создание сессионных cookies в Javascript для HTML-сайта

Быстрый ответ

Для создания cookies, которые сохраняются лишь во время текущей сессии браузера в JavaScript, следует отказаться от определения срока действия с помощью атрибутов expires и max-age:

document.cookie = "sessionKey=yourValue; path=/; secure";

Здесь sessionKey это имя cookie, а yourValue — данные, которые сохраняются до момента закрытия браузера. Атрибут secure гарантирует передачу cookie исключительно через HTTPS.

Для удобства хранения данных сессии на стороне клиента, вместо cookies можно использовать sessionStorage:

sessionStorage.setItem('sessionData', 'yourSessionValue');

где sessionData является ключом элемента, а yourSessionValue — значением сессии.

Управление сессиями без cookies: выпечка без духовки

Если необходимо контролировать сессии без применения серверных скриптов, а только с использованием HTML, для этого отлично подходит sessionStorage, которое предлагает готовое решение.

Очевидно, что данные sessionStorage привязаны к конкретной вкладке или окну, которые инициировали их. В отличие от cookies, информация из sessionStorage не доступна в других вкладках или окнах.

Многомерные cookies: сохранение структурированных данных

Применение JSON.stringify()

Для сохранения сложных, многомерных данных можно применить метод JSON.stringify(), который преобразует их в строку, которую без труда обработает sessionStorage:

sessionStorage.setItem('complexData', JSON.stringify({ key: 'value' }));
// Мы как в «Проклятии Эль Курадо»: объект внутри объекта внутри... понимаете, о чём я.
let data = JSON.parse(sessionStorage.getItem('complexData'));

Приготовьтесь окунуться в мир, сложность которого может застать врасплох даже Лео Ди Каприо.

Подробнее об этом расскажет наш спикер на видео

Работа с cookies посредством функций: подход, ориентированный на переиспользование

Для улучшения читаемости и поддерживаемости вашего кода стоит инкапсулировать работу с document.cookie в функции, позволяющие выполнять стандартные операции — создание, чтение и удаление cookies:

function setSessionCookie(name, value) {
  document.cookie = `${name}=${value}; path=/; secure`;
}

function getSessionCookie(name) {
  let matches = document.cookie.match(new RegExp(
    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
  ));
  return matches ? decodeURIComponent(matches[1]) : undefined;
}

function clearSessionCookie(name) {
  document.cookie = `${name}=; path=/; expires=Thu, 01 Jan 1970 00:00:01 GMT;`;
}

Постоянно используйте эти функции — это ваш надёжный спутник в мире cookies. 🍪

Визуализация

Представьте Банку с печеньем (🍪🏺), которая всегда рядом с вами, когда вы заняты работой, но исчезает, когда вы отдыхаете.

Создание cookies для сессии в JavaScript:

document.cookie = "name=value; path=/;";

Время работы (🏢): [🍪, 🍪, 🍪]
Время отдыха (🚶): []

Во время работы печенье всегда с вами, но как только вы отправляетесь на перерыв, оно исчезает!

Гарантия безопасности: применение правильных атрибутов для cookies

Путь в безопасность

С помощью атрибута path можно контролировать, по каким URL cookies будут отправлены. Этот способ укрепляет безопасность и улучшает эффективность использования cookies:

document.cookie = "sessionKey=yourValue; path=/secure; secure";

Это подобно банке для печенья с кодом доступа. Имейте в виду: не все cookies созданы равными, поэтому будьте бдительны!

Защита данных

Когда устанавливаете cookie, не забывайте указать атрибут secure, который гарантирует передачу их по защищённому соединению — HTTPS:

document.cookie = "sessionKey=yourValue; secure";

Этот атрибут защитит ваши cookies от злоумышленников, поджидающих вас по пути!

Проблемы с cookies: распространенные ошибки и способы их решения

Неверное удаление

Ошибки при удалении cookies часто связаны с тем, что при удалении применяются некорректные path или domain:

// Неверное удаление может не убрать cookie, если путь не совпадает
document.cookie = "sessionKey=yourValue; path=/; expires=Thu, 01 Jan 1970 00:00:01 GMT;";

// Правильное удаление
document.cookie = "sessionKey=; path=/theCorrectPath; expires=Thu, 01 Jan 1970 00:00:01 GMT;";

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

Ограничения в отдельных вкладках

Открытие новой вкладки или окна инициирует новую сессию с отдельным sessionStorage, который недоступен для других вкладок:

// SessionStorage в исходной вкладке
sessionStorage.setItem('data', 'originalTab');

// В новой вкладке данные будут недоступны
let newData = sessionStorage.getItem('data'); // вернет null

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

Полезные материалы

1. Свойство Document: cookie – Web API | MDN — всё о том, как управлять cookies в JavaScript.
2. Использование HTTP cookies – HTTP | MDN — полезная информация об атрибутах cookies и их отношении к безопасности.
3. JavaScript Cookies — учебник по управлению cookies.
4. Cookies, document.cookie — всесторонний анализ работы с cookies, содержит примеры.
5. Межсайтовая подделка запроса (CSRF) | Фонд OWASP — о важности CSRF-токенов при работе с сессионными cookies.
6. Понимание cookies с атрибутом SameSite — о связи атрибута SameSite с безопасностью.
7. Управление сессиями – OWASP Cheat Sheet Series — информация о безопасном управлении сессиями, важная при работе с сессионными cookies.