Cookies JavaScript – 03

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 Usernamee usernamesã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 que https://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ão http)

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 securesinalizador é a única parte que não é um par nome-valor.

Cookies em JavaScript

Para gerenciar cookies em JavaScript, você usa a document.cookiepropriedade.

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.cookieretorna 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 usernameque 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 Cookieclasse 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.cookiepropriedade.
• 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.cookiepropriedade.

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.cookieobjeto. Para torná-lo mais eficiente, você pode usar a classe de utilitário Cookie.
• Use a função encodeURIComponent()e decodeURIComponent()para codificar e decodificar os valores do cookie.