27.12.2024

JavaScript: Salvando CSS em Cookies e Restaurando Preferências do Usuário

Resposta Rápida

Para gerenciar cookies em JavaScript, utilize as funções setCookie e getCookie. Elas permitem criar e recuperar cookies especificando o nome, valor e o período de expiração em uma única expressão. Aqui, setCookie é usado para configurar um cookie, enquanto getCookie é utilizado para encontrar o valor de um cookie específico entre as strings armazenadas no navegador.

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('exemplo', 'valor', 7); // Cria um cookie 'exemplo' com duração de 7 dias
console.log(getCookie('exemplo')); // Exibe o valor de 'exemplo'

Use a função encodeURIComponent para codificar caracteres especiais ao usar setCookie, e utilize o método find para localizar o cookie desejado através do getCookie.

Deletando Cookies: Usando eraseCookie

Para remover um cookie, utilize a função eraseCookie, definindo uma data de expiração passada:

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

eraseCookie('exemplo'); // Deleta o cookie 'exemplo'

Gestão Eficiente de Cookies: Rumo à Profissionalização!

Codificação e Decodificação: Cuide dos Seus Caracteres

Os caracteres nos valores dos cookies requerem atenção especial. Use escape() e unescape() para codificar e decodificar caracteres especiais:

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;
}

Gerenciamento Dinâmico da Expiração de Cookies: Mantenha-se Flexível

O período de expiração de um cookie desempenha um papel crucial. Ajuste-o conforme as tarefas designadas ao cookie para criar a experiência do usuário que você espera:

function setLongTermCookie(name, value) {
  setCookie(name, value, 365); // Define o cookie por quase um ano
}

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

Visualização

// O conteúdo desta seção permanece inalterado.

Uso Avançado

Consistência na Seleção de CSS: Cada Detalhe Conta

document.getElementById('temaSelect').onchange = function() {
  setCookie('tema', this.value, 30); // Salva o tema selecionado por 30 dias
};

document.addEventListener('DOMContentLoaded', (event) => {
  let temaSalvo = getCookie('tema');
  if (temaSalvo) {
    document.getElementById('temaSelect').value = temaSalvo;
  }
});

Prevenindo Erros

Verifique os valores antes de salvá-los nos cookies para evitar mal-entendidos:

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=/;`;
}

Recursos Úteis

// O conteúdo dessa seção permanece inalterado.

Video

Navigation