Cookies em JavaScript

Uma das maneiras de salvar dados no navegador é através do uso de cookies. Sempre que acessamos uma página web, o servidor web, junto com essa página, envia cookies associados a ela (se houver). O navegador armazena esses dados por um tempo. Em acessos subsequentes à mesma página ou site, dependendo das configurações, os cookies são enviados de volta do navegador para o servidor.

Para trabalhar com cookies em JavaScript, o objeto document possui a propriedade cookie.

Para definir um cookie, basta atribuir uma string com os cookies à propriedade document.cookie:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Programício</title>
</head>
<body>
<script>
document.cookie = "login=tom32;";
console.log(document.cookie);
</script>
</body>
</html>

Neste exemplo, é definido um cookie chamado "login" com o valor "tom32". Em seguida, o cookie é obtido e exibido no console.

É importante observar que o comportamento dos cookies pode variar dependendo do navegador usado e de como a página web é carregada: como um arquivo local ou como um arquivo em um servidor web. Por exemplo, se carregarmos a página web como um arquivo local, simplesmente arrastando a página para o navegador Mozilla Firefox ou Safari, o navegador definirá os cookies e os exibirá no console. Navegadores suportam a visualização de cookies estabelecidos (assim como outros dados salvos). No Mozilla Firefox, por exemplo, isso pode ser visto na aba "Storage"(ou "Armazenamento") nas ferramentas de desenvolvedor.

Definindo cookies em JavaScript no Mozilla Firefox

No entanto, outros navegadores, como Google Chrome ou Opera, têm restrições para definir cookies em páginas web carregadas localmente. Portanto, se arrastarmos a página para o Google Chrome, o console não exibirá nada, pois o Google Chrome, por padrão, só permite definir cookies em páginas web carregadas de um servidor web que pertençam a um domínio na rede. Isso faz sentido, já que os cookies são destinados principalmente para a transferência de dados pelo protocolo HTTP entre o cliente e o servidor.

Portanto, para trabalhar com cookies, colocaremos as páginas HTML em um servidor web. Utilizaremos a opção mais simples, Node.js, pois esta tecnologia é bastante simples, disponível para todos os sistemas operacionais principais e também permite o uso de JavaScript para criar aplicações. Antes de criar a aplicação, é necessário instalar o Node.js. Não é necessário nenhum conhecimento prévio de Node.js, todo o código utilizado será explicado em detalhes. Contudo, ao invés de Node.js, pode ser usada qualquer outra tecnologia de servidor - PHP, ASP.NET, Python, etc., ou um servidor web específico como Apache ou IIS.

Vamos criar uma pasta no sistema de arquivos para os arquivos do servidor web. No meu caso, a pasta será C:\app. Em seguida, nesta pasta, definiremos um arquivo de servidor chamado server.js com o seguinte código:

Este é um servidor simples, mas suficiente para nossa tarefa. Vamos explicar o código brevemente. Primeiro, são carregados os pacotes com a funcionalidade que vamos utilizar:

const http = require("http"); // para lidar com requisições de entrada
const fs = require("fs");     // para ler o arquivo index.html do disco rígido

Para criar o servidor, usamos a função http.createServer(). A esta função, passamos uma função de callback que é chamada sempre que uma requisição é feita ao servidor. Esta função possui dois parâmetros: request (contém os dados da requisição) e response (gerencia o envio da resposta). Não utilizamos o primeiro parâmetro, por isso o substituímos por um sublinhado _.

Na função de callback, enviamos o arquivo index.html, que definiremos em seguida:

fs.readFile("index.html", (error, data) => response.end(data));

Para ler arquivos, usamos a função fs.readFile(). O primeiro parâmetro é o caminho do arquivo (neste caso, assumimos que o arquivo index.html está na mesma pasta que o arquivo do servidor server.js). O segundo parâmetro é uma função que é chamada após a leitura do arquivo e recebe o seu conteúdo através do segundo parâmetro data. O conteúdo lido pode então ser enviado usando a função response.end(data).

No final, usamos a função listen() para iniciar o servidor web na porta 3000. Ou seja, o servidor será acessível através do endereço http://localhost:3000/.

Na mesma pasta, criaremos o arquivo index.html com o seguinte código:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Programício</title>
</head>
<body>
<script>
document.cookie = "login=tom32;";
console.log(document.cookie);
</script>
</body>
</html>

Aqui é definido o cookie login. Em seguida, o cookie é exibido no console.

Agora, no console, navegue até a pasta do servidor usando o comando cd e inicie o servidor com o comando node server.js:

C:\app>node server.js
Servidor iniciado em http://localhost:3000

Após iniciar o servidor, podemos acessar a página no navegador através do endereço http://localhost:3000, onde será exibida a página index.html. Usando as ferramentas do navegador, podemos visualizar os cookies estabelecidos. No Google Chrome, por exemplo, isso pode ser visto na aba Aplicativo (ou Application), na seção à esquerda em Armazenamento -> Cookies (ou Storage -> Cookies).

Definindo e visualizando cookies em JavaScript no Google Chrome

Configurando Parâmetros de Cookies

Cookies podem aceitar até seis parâmetros diferentes:

Nome e Valor do Cookie
O nome do cookie não é sensível a maiúsculas e minúsculas, o que significa que, por exemplo, login e Login se referem ao mesmo cookie. Apenas strings são permitidas como valores (não números, por exemplo). Nome e valor são os únicos componentes obrigatórios. Indicar as outras informações é opcional (se não forem especificadas, serão usados valores padrão).
Data de Expiração (parâmetro expires)
A data de expiração indica até quando o cookie é válido. Após essa data, o cookie é removido e não é mais enviado ao servidor. Se não for especificada uma data de expiração ao criar o cookie, ele será removido automaticamente quando a sessão do navegador for encerrada.
Caminho (parâmetro path) e Domínio (parâmetro domain)
Estes parâmetros são usados para delimitar os cookies. Por exemplo, um cookie com domínio www.localhost.com é enviado apenas com solicitações para esse domínio. Um cookie com domínio www.localhost.com e caminho /home é enviado apenas com solicitações para www.localhost.com/home, mas não para www.localhost.com/about.
Parâmetro secure
Este é um flag de segurança que pode ser usado para especificar se os cookies devem ser enviados apenas em conexões que utilizam o protocolo Secure Sockets Layer (SSL), como HTTPS. Se este parâmetro estiver definido, os cookies podem ser enviados para https://www.localhost.com, mas não para http://www.localhost.com.

Acima, utilizamos apenas dois parâmetros: nome do cookie e valor:

document.cookie = "login=tom32;";

Neste caso, o cookie tem o nome login e o valor tom32.

Parâmetro expires

Um cookie como o acima tem uma vida útil muito limitada: se não for definido explicitamente, o cookie será removido ao fechar o navegador. Isso pode ser ideal quando se deseja apagar todas as informações após o uso da aplicação web e o fechamento do navegador. No entanto, esse comportamento nem sempre é desejável.

Para definir a data de expiração de um cookie, usamos o parâmetro expires:

document.cookie = "login=tom32;expires=Sun, 31 Dec 2024 23:59:00 GMT;";

Neste caso, o cookie login expira no domingo, 31 de dezembro de 2024, às 23:59. O formato do parâmetro expires é muito importante. No entanto, ele pode ser gerado programaticamente. Para isso, podemos usar o método toUTCString() do objeto Date:

const expire = new Date();
expire.setHours(expire.getHours() + 4);
document.cookie = "login=tom32;expires=" + expire.toUTCString() + ";";

Neste exemplo, a vida útil do cookie será de 4 horas.

Caminho e Domínio

Se precisarmos definir um cookie para um caminho específico no site, podemos usar o parâmetro path. Por exemplo, se quisermos definir um cookie apenas para o caminho http://localhost:3000/home:

document.cookie = "login=tom32;expires=Sun, 31 Dec 2023 23:59:00 GMT;path=/home;";

Neste caso, o cookie não estará disponível para outros caminhos no site, como http://localhost:3000/about. No entanto, este cookie será definido se acessarmos http://localhost:3000/home.

Se o nosso site tiver vários subdomínios e quisermos definir um cookie para um subdomínio específico, podemos usar o parâmetro domain. Por exemplo, se tivermos um subdomínio blog.mysite.com:

document.cookie = "login=tom32;expires=Sun, 31 Dec 2023 23:59:00 GMT;path=/;domain=blog.mysite.com;";

O parâmetro path=/ indica que o cookie estará disponível para todos os diretórios e caminhos do subdomínio blog.mysite.com.

Parâmetro secure

O último parâmetro, secure, especifica o uso de SSL (Secure Sockets Layer) e é adequado para sites que utilizam o protocolo HTTPS. Se este parâmetro estiver definido como true, os cookies serão usados apenas quando uma conexão SSL estiver estabelecida. Por padrão, este parâmetro é false.

document.cookie = "login=tom32;expires=Sun, 31 Dec 2023 23:59:00 GMT;path=/;secure=true;";

Obtendo Cookies

Para extrair cookies do navegador, basta acessar a propriedade document.cookie:

const expire = new Date();
expire.setHours(expire.getHours() + 4);

document.cookie = "language=JavaScript;expires=" + expire.toUTCString() + ";";
document.cookie = "company=Localhost;expires=" + expire.toUTCString() + ";";
document.cookie = "login=tom32;";

console.log(document.cookie);

Neste exemplo, são definidos três cookies: language, company e login. Em seguida, os cookies são exibidos no console:

language=JavaScript; company=Localhost; login=tom32

Os cookies extraídos não incluem os parâmetros expires, path, domain e secure. Além disso, os cookies são separados por ponto e vírgula, por isso é necessário realizar algumas transformações para obter seus nomes e valores:

const cookies = document.cookie.split(";");
for (const cookie of cookies) {
    const parts = cookie.split("=");
    console.log("Nome do cookie:", parts[0]);
    console.log("Valor:", parts[1], "\n\n");
}

Removendo Cookies

Para remover um cookie, basta definir a data de expiração para uma data no passado:

document.cookie = "login=tom32;expires=Thu, 01 Jan 1970 00:00:00 GMT;";

Limitações dos Cookies

Todos os cookies para o domínio e caminho correspondentes são enviados com cada solicitação, o que pode afetar o volume de dados transferidos. Além disso, cookies enviados pelo protocolo HTTP (e não pelo HTTPS) são transmitidos sem criptografia, o que representa um risco de segurança dependendo do tipo de informação transmitida. Outra limitação é o tamanho permitido para cookies, que é de 4 KB.