logo
Все курсыВсе курсы
ВебинарыРазобраться в ITРеферальная программаПолучить профессию в SkyproПолучить профессию в Skypro

JavaScript: сохраняем CSS в cookie и восстанавливаем выбор

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

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

Чтобы управлять cookies на JavaScript, используйте функции setCookie и getCookie. Они позволяют вам создавать и извлекать cookies, задавая имя, значение и срок действия cookie в одном выражении. При этом setCookie служит для установки cookie, а getCookie — для поиска значения определённого cookie среди строк cookie в браузере.

JS
Скопировать код
function setCookie(name, value, days) {
  let expires = new Date(Date.now() + days * 864e5).toUTCString();
  document.cookie = `${name}=${encodeURIComponent(value)};expires=${expires};path=/`;
}

function getCookie(name) {
  let cookie = document.cookie.split('; ').find(row => row.startsWith(name + '='));
  return cookie?.split('=')[1] || null;
}

setCookie('example', 'value', 7); // Создаёт cookie 'example' сроком на 7 дней
console.log(getCookie('example')); // Выводит значение 'example'

Применяйте функцию encodeURIComponent для кодирования специальных символов при использовании setCookie и метод find для поиска потребного cookie с помощью getCookie.

Кинга Идем в IT: пошаговый план для смены профессии

Для удаления cookie используйте функцию eraseCookie, установив прошедшую дату окончания действия:

JS
Скопировать код
function eraseCookie(name) {
  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/;`;
}

eraseCookie('example'); // Удаляет cookie 'example'

Эффективное управление cookies: на пути к профессионализму!

Кодирование и декодирование: берегите ваши символы

Символы в значениях cookies требуют особого внимания. Применяйте escape() и unescape() для кодирования и декодирования специальных символов:

JS
Скопировать код
function setCookie(name, value, days) {
  document.cookie = `${name}=${escape(value)};expires=${expires};path=/`;
}

function getCookie(name) {
  let cookieValue = document.cookie.split('; ').find(row => row.startsWith(name + '=')).split('=')[1] || null;
  return cookieValue ? unescape(cookieValue) : null;
}

Динамическое управление сроком действия cookies: оставайтесь гибкими

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

JS
Скопировать код
function setLongTermCookie(name, value) {
  setCookie(name, value, 365); // Устанавливает cookie почти на год
}

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

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

// Содержимое секции остаётся без изменений

Продвинутое использование

Постоянство в выборе CSS: дело в деталях

JS
Скопировать код
document.getElementById('themeSelect').onchange = function() {
  setCookie('theme', this.value, 30); // Сохраняет выбранную тему на 30 дней
};

document.addEventListener('DOMContentLoaded', (event) => {
  let savedTheme = getCookie('theme');
  if(savedTheme) {
    document.getElementById('themeSelect').value = savedTheme;
  }
});

Предотвращайте ошибки

Проверяйте значения перед их сохранением в cookies, чтобы избежать недоразумений:

JS
Скопировать код
function setValidatedCookie(name, value, placeholder) {
  if(value !== placeholder) {
    setCookie(name, value, 30);
  }
}

function setSecureCookie(name, value, days) {
  let expires = new Date(Date.now() + days * 864e5).toUTCString();
  document.cookie = `${name}=${encodeURIComponent(value)};Secure;SameSite=Strict;expires=${expires};path=/;`;
}

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

// Содержимое секции остаётся без изменений

Свежие материалы
Что такое домен и хостинг и зачем они нужны?
6 сентября 2024
Лучшие каналы для веб-разработки
6 сентября 2024
Коды состояния HTTP: что они значат?
6 сентября 2024