No desenvolvimento web, o gerenciamento de cookies via JavaScript permite armazenar dados no navegader do usuário. Existem várias abordagens para implementar essas operações, incluindo definição, leitura e exclusão de cookies.

Primeiro Método: Implementação Básica

Uma forma comum é criar funções utilitárias para manipular cookies. Veja um exemplo adaptado com nomes de variáveis e lógica modificados:

// Função para criar ou atualizar um cookie
function storeCookie(key, value, daysValid) {
    const currentTime = new Date();
    currentTime.setTime(currentTime.getTime() + (daysValid * 86400000)); // 86400000 ms em um dia
    const expiryDate = "expires=" + currentTime.toUTCString();
    document.cookie = key + "=" + value + ";" + expiryDate + ";path=/";
}

// Função para obter o valor de um cookie
function retrieveCookie(key) {
    const cookieEntries = document.cookie.split(';');
    const targetPrefix = key + "=";
    for (let entry of cookieEntries) {
        entry = entry.trim();
        if (entry.startsWith(targetPrefix)) {
            return entry.substring(targetPrefix.length);
        }
    }
    return null;
}

// Função para remover um cookie
function removeCookie(key) {
    storeCookie(key, "", -1); // Define expiração no passado
}

// Exemplo de uso
storeCookie('usuario', 'Ana', 30);
const usuarioAtual = retrieveCookie('usuario');
if (usuarioAtual) {
    alert('Bem-vinda, ' + usuarioAtual);
} else {
    removeCookie('usuario');
}

Segundo Método: Utilizando Expressões Regulares

Outra abordagem emprega expressões regulares para parsing mais robusto, conforme mostrado abaixo com variáveis renomeadas:

// Escrever cookie
function defineCookie(nome, valor, validadeDias) {
    const dataExpiracao = new Date();
    dataExpiracao.setDate(dataExpiracao.getDate() + validadeDias);
    const valorEscapado = encodeURIComponent(valor);
    document.cookie = `${nome}=${valorEscapado}; expires=${dataExpiracao.toUTCString()}; path=/`;
}

// Ler cookie usando regex
function fetchCookie(nome) {
    const padrao = new RegExp('(^|;\\s*)' + nome + '=([^;]*)');
    const resultado = document.cookie.match(padrao);
    return resultado ? decodeURIComponent(resultado[2]) : null;
}

// Deletar cookie
function eraseCookie(nome) {
    defineCookie(nome, '', -1);
}

// Demonstração
defineCookie('tema', 'escuro', 7);
const temaSelecionado = fetchCookie('tema');
console.log(temaSelecionado); // Saída: "escuro"
eraseCookie('tema');

Exemplo Prático com Formulário HTML

Integrando com uma interface simples, o código abaixo permite interação do usuário para gerenciar cookies via formulário. Note que a lógica foi reestruturada para clareza:

<!-- Formulário para gerenciamento de cookies -->
<div id="cookie-manager">
    <label for="cookieKey">Nome do Cookie:</label>
    <input type="text" id="cookieKey" /><br/>
    <label for="cookieVal">Valor:</label>
    <input type="text" id="cookieVal" /><br/>
    <label for="cookieHours">Horas até expirar:</label>
    <input type="number" id="cookieHours" /><br/>
    <button onclick="handleAdd()">Adicionar</button>
    <button onclick="handleGet()">Obter</button>
    <button onclick="handleDelete()">Remover</button>
</div>

<script>
    // Função auxiliar para obter valor do input
    function inputValor(id) {
        return document.getElementById(id).value;
    }

    function handleAdd() {
        const chave = inputValor('cookieKey');
        const valor = inputValor('cookieVal');
        const horas = parseInt(inputValor('cookieHours'));
        if (chave && valor && horas > 0) {
            addCookieViaHoras(chave, valor, horas);
        }
    }

    function handleGet() {
        const chave = inputValor('cookieKey');
        const valor = getCookieViaNome(chave);
        alert(valor ? `Valor: ${valor}` : 'Cookie não encontrado.');
    }

    function handleDelete() {
        const chave = inputValor('cookieKey');
        deletarCookieViaNome(chave);
        alert('Cookie removido.');
    }

    // Funções de manipulação específicas para este exemplo
    function addCookieViaHoras(nome, valor, horas) {
        const data = new Date();
        data.setTime(data.getTime() + (horas * 3600000)); // Converter horas para milissegundos
        document.cookie = `${nome}=${valor}; expires=${data.toUTCString()}; path=/`;
    }

    function getCookieViaNome(nome) {
        const cookies = document.cookie.split('; ');
        for (const item of cookies) {
            const [chave, valor] = item.split('=');
            if (chave === nome) return valor;
        }
        return null;
    }

    function deletarCookieViaNome(nome) {
        const dataPassada = new Date(0); // Data UNIX epoch
        document.cookie = `${nome}=; expires=${dataPassada.toUTCString()}; path=/`;
    }
</script>

Considerações sobre Compatibilidade com Navegadores

Ao testar cookies em ambientes locais, como arquivos HTML abertos diretamente no navegador, certos navegadores como o Google Chrome podem bloquear operações de leitura e escrita por motivos de segurança. Para garantir funcionalidade plena, execute o código em um servidor local ou remoto. Por exemplo, a linha abaixo pode não funcionar em um arquivo local no Chrome:

document.cookie = "teste=valor";
console.log(document.cookie); // Pode retornar string vazia em ambiente local

Em um site hospedado online, o mesmo código exibirá os cookies normalmnete.