Resumo : neste tutorial, você aprenderá sobre cookies HTTP e como usar JavaScript para gerenciá-los de maneira eficaz.
O que é um biscoito
Um cookie HTTP é um dado que um servidor envia para um navegador da web. Em seguida, o navegador armazena o cookie HTTP no computador do usuário e o envia de volta ao mesmo servidor nas solicitações posteriores.
Um cookie HTTP também é conhecido como cookie da web ou cookie do navegador. E é comumente chamado de cookie.
Por exemplo, o cabeçalho de uma resposta HTTP pode ser assim:
HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie:username=admin
...
Linguagem de código: JavaScript ( javascript )
A resposta HTTP define um cookie com o nome "username"
e o valor de "admin"
. O servidor codifica o nome e o valor ao enviar o cookie para o navegador da web.
O navegador da web armazena essas informações e as envia de volta ao servidor por meio do cabeçalho Cookie HTTP para a próxima solicitação da seguinte forma:
GET /index.html HTTP/1.1
Cookie: username=admin
...
Por que biscoitos
É importante entender que o HTTP não tem estado . Quando você envia duas solicitações HTTP subsequentes ao servidor, não há link entre elas. Em outras palavras, o servidor não pode saber se as duas solicitações são do mesmo navegador.
Portanto, um cookie é usado para saber se as duas solicitações vieram do mesmo navegador.
Na prática, os cookies servem as seguintes finalidades:
- Gestão de sessões – os cookies permitem-lhe gerir qualquer informação que o servidor deva lembrar. Por exemplo, logins, carrinhos de compras, etc.
- Personalização – os cookies permitem armazenar preferências, temas e configurações específicas de um usuário.
- Rastreamento – os cookies ajudam a registrar e analisar o comportamento do usuário em publicidade.
Detalhes dos cookies
Um cookie consiste nas seguintes informações armazenadas pelo navegador da web:
- Nome – um nome exclusivo que identifica o cookie. Os nomes dos cookies não diferenciam maiúsculas de minúsculas. Isso significa que
Username
eusername
são os mesmos cookies. - Valor – valor da string do cookie. Deve ser codificado por URL.
- Domínio – um domínio para o qual o cookie é válido.
- Caminho – caminho sem o domínio para o qual o cookie deve ser enviado ao servidor. Por exemplo, você pode especificar que o cookie seja acessível apenas nas
https://tutorials.acervolima.com/dom/
páginas em quehttps://tutorials.acervolima.com/
não enviará as informações do cookie. - Expiração – carimbo de data/hora que indica quando o navegador deve excluir o cookie (ou quando o navegador deve parar de enviar o cookie ao servidor). A data de vencimento é definida como uma data no formato GMT:
Wdy, DD-Mon-YYYY HH:MM:SS GMT
. A data de expiração permite que os cookies sejam armazenados nos navegadores do usuário mesmo depois que os usuários fecham os navegadores. - Sinalizador seguro – se especificado, o navegador da web apenas envia o cookie para o servidor por meio de uma conexão SSL (
https
, nãohttp
)
O nome, valor, domínio, caminho, expiração e sinalizador seguro são separados por ponto e vírgula e espaço. Por exemplo:
HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie:user=john
; expire=Tue, 12-December-2030 12:10:00 GMT; domain=tutorials.acervolima.com; path=/dom; secure
...
Observe que o secure
sinalizador é a única parte que não é um par nome-valor.
Cookies em JavaScript
Para gerenciar cookies em JavaScript, você usa a document.cookie
propriedade.
1) Obtenha um valor de cookie
O exemplo a seguir retorna uma string com todos os cookies disponíveis para a página:
const str = document.cookie;
Linguagem de código: JavaScript ( javascript )
O document.cookie
retorna uma série de pares nome-valor separados por ponto e vírgula como este:
name1=value1;name2=value2;...
O exemplo a seguir mostra os cookies de uma página web:
"_ga=GA1.2.336374160.1600215156; dwf_sg_task_completion=False; _gid=GA1.2.33408724.1600901684"
Linguagem de código: JSON/JSON com comentários ( json )
Como todos os nomes e valores são codificados por URL, você precisa usar decodeURIComponent()
para decodificá-los.
2) Defina um cookie
Para definir um valor para um cookie, você redige o texto do cookie no seguinte formato:
name=value; expires=expirationTime; path=domainPath; domain=domainName; secure
…e anexe-o ao cookie:
document.cookie = cookieText;
Linguagem de código: JavaScript ( javascript )
Um cookie requer apenas nome e valor. Por exemplo:
document.cookie = "username=admin";
Linguagem de código: JavaScript ( javascript )
Este exemplo cria um cookie chamado username
que tem o valor admin
. O navegador enviará este cookie sempre que fizer uma solicitação ao servidor.
Como o cookie não especifica o tempo de expiração, ele será excluído quando o navegador for fechado.
O texto do cookie "username=admin"
não possui nenhum caractere que precise ser codificado.
No entanto, é uma boa prática sempre usar a encodeURIComponent()
função ao definir um cookie como este:
document.cookie = `${encodeURIComponent("username")}=${encodeURIComponent("admin")}`;
Linguagem de código: JavaScript ( javascript )
3) Remova um cookie
Para remover um cookie, você precisa configurá-lo novamente com o mesmo nome, caminho, domínio e opção segura. E você precisa definir a data de validade para algum momento no passado.
Classe de cookies JavaScript
A seguinte classe Cookie define, obtém e remove um cookie:
class Cookie {
static get(name) {
const cookieName = `${encodeURIComponent(name)}=`;
const cookie = document.cookie;
let value = null;
const startIndex = cookie.indexOf(cookieName);
if (startIndex > -1) {
const endIndex = cookie.indexOf(';', startIndex);
if (endIndex == -1) {
endIndex = cookie.length;
}
value = decodeURIComponent(
cookie.substring(startIndex + name.length, endIndex)
);
}
return value;
}
static set(name, value, expires, path, domain, secure) {
let cookieText = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
if (expires instanceof Date) {
cookieText += `; expires=${expires.toGMTString()}`;
}
if (path) cookieText += `; path=${path}`;
if (domain) cookieText += `; domain=${domain}`;
if (secure) cookieText += `; secure`;
document.cookie = cookieText;
}
static remove(name, path, domain, secure) {
Cookie.set(name, '', new Date(0), path, domain, secure);
}
}
Linguagem de código: JavaScript ( javascript )
Como funciona.
A Cookie
classe possui três métodos estáticos: get()
, set()
e remove()
.
1) O método get()
O get()
método retorna o valor de um cookie com um nome especificado. Para isso, ele executa as seguintes etapas:
- Primeiro, encontre a ocorrência do nome do cookie por um sinal de igual na
document.cookie
propriedade. - Segundo, se o cookie estiver disponível, ele usa
indexOf()
para encontrar o final do cookie, que é especificado pelo próximo ponto e vírgula (;
) após esse local. Se o ponto e vírgula não estiver disponível, significa que o cookie é o último da string. - Terceiro, decodifique o valor do cookie usando a
decodeURIComponent()
função e retorne o valor decodificado.
2) O método set()
O set()
método define um cookie na página. Aceita os argumentos necessários para construir um cookie.
O set()
método requer os dois primeiros argumentos: nome e valor. Os outros argumentos não são obrigatórios.
O set()
método compõe um texto de cookie e o atribui à document.cookie
propriedade.
3) O método remove()
Para remover um cookie, o remove()
método configura o cookie novamente com a data de expiração definida como 1º de janeiro de 1970. Observe que o new Date(0)
retorna um objeto de data cuja data é 1º de janeiro de 1970.
Usando a classe Cookie
A seguir mostramos como usar a classe Cookie para definir, obter e remover um cookie cujo nome é nome de usuário e o valor é admin:
// set a cookie
Cookie.set('username', 'admin');
// get a cookie
console.log(Cookie.get('username')); // admin
// remove a cookie by a name
Cookie.remove('username');
Linguagem de código: JavaScript ( javascript )
Ver cookies com navegadores da web
Para visualizar os cookies no navegador da web, você usa o devtools.
- Primeiro, clique na guia do aplicativo.
- Em segundo lugar, selecione o nó Cookies em Storage .
A imagem a seguir mostra os cookies do Google.com:
Resumo
- Um cookie é um dado que um servidor envia para um navegador da web. O navegador da web então o armazena no computador do usuário e envia o cookie de volta ao mesmo servidor nas solicitações subsequentes.
- O servidor utiliza cookies para identificar se duas solicitações sucessivas vieram do mesmo navegador.
- Para gerenciar cookies, você usa o
document.cookie
objeto. Para torná-lo mais eficiente, você pode usar a classe de utilitário Cookie. - Use a função
encodeURIComponent()
edecodeURIComponent()
para codificar e decodificar os valores do cookie.