Como definir cookies no navegador?

Pode definir cookies no navegador de várias maneiras.

1. Através do cabeçalho HTTP Set-Cookie do servidor. Este é o método principal para definir cookies, que ocorre no lado do servidor. O servidor envia ao navegador o cabeçalho Set-Cookie, que instrui o navegador a guardar um par chave-valor específico.

   Exemplo de resposta HTTP do servidor:

   HTTP/1.1 200 OK
   Content-Type: text/html
   Set-Cookie: username=johndoe; Expires=Thu, 21 Dec 2023 12:00:00 GMT; Path=/; Secure; HttpOnly
   Set-Cookie: settings=theme=dark&lang=en; Path=/
   

   Parâmetros do cabeçalho Set-Cookie:

   • name=value: Nome e valor do cookie. Parâmetro obrigatório.
   • Expires=<date>: Data e hora de expiração do cookie. Se não especificado, o cookie é de sessão e é eliminado ao fechar o navegador. Formato de data - RFC 1123.
   • Max-Age=<seconds>: Tempo máximo de vida do cookie em segundos. Tem prioridade sobre Expires.
   • Domain=<domain>: Domínio para o qual o cookie está disponível. Por padrão, o domínio atual (mas não subdomínios).
   • Path=<path>: Caminho no servidor para o qual o cookie está disponível. Por padrão, o caminho raiz /.
   • Secure: Indicador de que o cookie deve ser enviado apenas via HTTPS.
   • HttpOnly: Indicador de que o cookie não é acessível via JavaScript através de document.cookie. Protege contra ataques XSS.
   • SameSite=<mode>: Controla o envio do cookie em requisições entre sites. Valores possíveis: Strict, Lax (padrão), None.

2. Através do JavaScript no lado do cliente. Com o objeto document.cookie pode-se ler, escrever e eliminar cookies.

   Escrita de cookie:

   // Definir cookie simples
   document.cookie = "username=johndoe";
   
   // Definir cookie com expires, path, secure e SameSite=Lax
   const expiryDate = new Date();
   expiryDate.setTime(expiryDate.getTime() + (30 * 24 * 60 * 60 * 1000)); // 30 dias
   document.cookie = `token=abcdef123456; expires=${expiryDate.toUTCString()}; path=/; secure; SameSite=Lax`;
   

   Leitura de cookies:

   // document.cookie devolve uma string com todos os cookies acessíveis no formato "chave1=valor1; chave2=valor2; ..."
   console.log(document.cookie);
   

   Eliminação de cookie: Para eliminar um cookie, deve-se defini-lo com uma data de expiração no passado.

   document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; // Definir expires no passado
   

   É importante que ao eliminar, especifiquem-se os mesmos parâmetros path e domain (se foram definidos), que na criação. SameSite também deve coincidir para uma eliminação correta.

3. Com bibliotecas JavaScript de terceiros. Existem bibliotecas que facilitam o trabalho com cookies (por exemplo, js-cookie). Elas fornecem uma API mais fácil para definir, obter e eliminar cookies.

   Exemplo com js-cookie:

   // Inclusão da biblioteca
   // <script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script>
   
   // Definir cookie
   Cookies.set('username', 'johndoe');
   
   // Definir cookie com opções
   Cookies.set('token', 'abcdef123456', { expires: 30, path: '/', secure: true, sameSite: 'Lax' }); // expires em dias
   
   // Obter cookies
   const username = Cookies.get('username'); // Retorna 'johndoe' ou undefined
   const allCookies = Cookies.get(); // Retorna um objeto com todos os cookies
   
   // Eliminar cookies
   Cookies.remove('username');
   Cookies.remove('token', { path: '/' }); // Especificar path se foi definido na criação