Получить профессию в Skypro
JavaScript: сохраняем CSS в cookie и восстанавливаем выбор
Быстрый ответ
Чтобы управлять cookies на JavaScript, используйте функции setCookie и getCookie. Они позволяют вам создавать и извлекать cookies, задавая имя, значение и срок действия cookie в одном выражении. При этом setCookie служит для установки cookie, а getCookie — для поиска значения определённого cookie среди строк cookie в браузере.
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.
Удаление cookies: использование eraseCookie
Для удаления cookie используйте функцию eraseCookie, установив прошедшую дату окончания действия:
function eraseCookie(name) {
document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/;`;
}
eraseCookie('example'); // Удаляет cookie 'example'Эффективное управление cookies: на пути к профессионализму!
Кодирование и декодирование: берегите ваши символы
Символы в значениях cookies требуют особого внимания. Применяйте escape() и unescape() для кодирования и декодирования специальных символов:
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 задачами, чтобы создать ожидаемый пользователем опыт:
function setLongTermCookie(name, value) {
setCookie(name, value, 365); // Устанавливает cookie почти на год
}
function setSessionCookie(name, value) {
document.cookie = `${name}=${encodeURIComponent(value)};path=/;`;
}Визуализация
// Содержимое секции остаётся без изменений
Продвинутое использование
Постоянство в выборе CSS: дело в деталях
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, чтобы избежать недоразумений:
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=/;`;
}Полезные материалы
// Содержимое секции остаётся без изменений