Minicursos - Javascript

Cookies


No tópico anterior vimos como persistir dados entre funções através de variáveis globais. Isso é muito útil, mas podemos precisar de algo mais persistente ainda. Para entendermos exatamente o papel e a importância de um Cookie, vamos antes falar sobre um importante conceito chamado Sessão.

Uma sessão acontece sempre que você abre o seu navegador e carrega alguma página. Se você fechar o navegador, estará encerrando a sessão. Bem, mas e se quisermos persistir dados entre as sessões, ou seja, e se quisermos fechar o navegador e, quando o abrirmos novamente, termos acesso aos dados salvos na sessão anterior? É possível! Para isso temos que usar os famosos Cookies!

Existe uma forma interessante de verificar um cookie em ação. Basta que você entre em algum grande portal de compras e fique analisando um determinado tipo de produto, como por exemplo câmeras fotográficas. Então você fecha o seu navegador e o abre novamente. Você verá que o site colocará em destaque as câmeras fotográficas, pois ele "se lembra" que em sua última visita você demonstrou interesse por este tipo de produto. Essa capacidade de "se lembrar" das coisas, ou seja, de persistir dados entre sessões, é possível graças aos Cookies.

Cookies são pequenos blocos de dados armazenados pelo navegador no computador do usuário. Seu funcionamento lembra muito o das variáveis, aliás, o princípio é o mesmo, pois neles definimos um nome e o vinculamos a um valor. A grande diferença é que os dados gravados em cookies persistem, ou seja, eles continuam lá mesmo depois do navegador ser fechado ou do computador do usuário ser desligado.

Vamos criar um problema simples para aprendermos a lidar com eles. Faremos uma função que será executada no carregamento da página e que perguntará o nome do usuário, então o exibirá em uma mensagem de boas vindas. Nosso código JavaScript ficará da seguinte forma:

<script type="text/javascript">
function saudacao() {
var nome = prompt("Seja bem vindo!", "Por favor, digite seu nome: ");
if ((nome != "") && (nome != null))
alert("Prazer em conhecê-lo, " + nome)
else
alert("Prazer em conhecê-lo, usuário ")
}
</script>

Promtp

A observação antes de prosseguirmos fica por conta do comando prompt, do qual eu não havia falado ainda. Sua função é muito simples, pois ele é responsável somente por exibir um pequeno prompt, ou seja, uma pequena caixa para que o usuário entre com um dado. Neste exemplo estamos armazenando a informação digitada pelo usuário na variável nome. No navegador esse comando ficará assim:

Cookies - Javascript

Resumindo, fiz um pequeno código para receber o nome do usuário. Se ele digitar um nome, receberá uma mensagem de boas vindas personalizada. Se não digitar nada, receberá uma mensagem genérica.

Cookies - Javascript

O problema desse código é que a cada vez que abrirmos essa página ele irá perguntar o nome do usuário, ou seja, a informação digitada não persiste. Vamos resolver isso com um cookie, mas antes vamos entender como é sua estrutura.

Basicamente um cookie é formado por três dados, que são um nome, um valor e um período de vida. Esse período de vida é chamado de tempo de expiração ou validade. Vencido esse tempo o cookie se destrói, ou seja, deixa de estar disponível. Esse valor é sempre definido em milissegundos, sempre a serem acrescentados a uma data, que normalmente é a data atual. Vamos a um exemplo prático, para ficar fácil de compreender.

Poderíamos criar um cookie assim:

function gravaCookie()
{
document.cookie = "nomeUsuario=Daniel;"
}

Dessa forma criamos um cookie chamado nomeUsuario com o valor Daniel dentro dele. Como não especificamos o terceiro parâmetro, que é o tempo de duração do cookie, ele será válido apenas até o usuário fechar o navegador. Não existirá persistência entre as sessões.

Poderíamos também criar um cookie válido por 10 minutos. Para isso o código ficaria assim:

Cookies - Javascript

Já que é comum usarmos a data atual como referência para definirmos por quanto tempo um cookie terá validade, criei a variável data, que é um objeto do tipo Date. Em seguida, na linha 2 da função, defini o seu valor como sendo a data atual mais 600.000 milésimos de segundo, que equivalem a 10 minutos, portanto a variável data terá a data atual, mais 10 minutos.

Na terceira linha criei o cookie, de nome nomeUsuario, valor Daniel e data de vencimento para 10 minutos, que é o valor contido na variável data. O método toGMTString apenas está convertendo para o formato GMT(Greenwich Mean Time), que é um formato adequado para a criação dos cookies.

Vou abrir a lista de cookies do Firefox e ver se deu certo.

Cookies - Javascript

Aí está nosso cookie perfeitamente gravado, com o nome de nomeUsuario, o valor Daniel e a data de validade estipulada em 10 minutos a partir da data atual.

Vamos fazer um aperfeiçoamento nesse código, para permitir que o valor armazenado não seja um valor fixo definido no código, mas sim o dado digitado pelo usuário no prompt exibido quando a página for carregada. Nosso código ficará dessa forma:

Cookies - Javascript

Transformei a variável nome em uma variável global, para que a função gravaCookie pudesse acessá-la. Dentro da função saudação() eu adicionei o chamado para a função gravaCookie e, na linha em que o cookie é criado, já dentro da função gravaCookie, fiz a concatenação dela com o restante do código.

Agora nosso cookie será criado com o valor digitado pelo usuário na tela de saudação. Para melhorar nosso site temos que verificar se o cookie existe e, caso essa resposta seja afirmativa, devemos ler o valor do mesmo e já exibir para o usuário, sem lhe perguntar seu nome novamente.

Para isso precisamos verificar se é a primeira vez que o usuário acessa o site, ou seja, temos que verificar se já existe um cookie armazenando seus dados. Se houver, precisamos recuperar esse valor guardado e exibir. Se não houver, então faremos o cadastramento dele, ou seja, a gravação desse cookie. Isso pode ser feito de algumas maneiras. Vou mostrar uma delas:

Cookies - JavaScript

Vou explicar o código para que fique claro, por isso enumerei algumas linhas importantes. Acompanhem:

O código começa com a criação da variável valorCookie, que recebe o retorno da função leCookie(). Dentro dessa função, na linha 1, criei a variável cookies, que armazenará os cookies disponíveis. O parâmetro split serve para indicar um ponto de separação. Como os cookies são separados pelo sinal de ponto e vírgula, passei isso como parâmetro. Nesse momento nossa variável cookies vai conter o par “nome=valor” dos cookies disponíveis, vejam esse debug:

Cookies - JavaScript

Em destaque no código temos o valor da variável cookies, que contém o cookie nomeUsuario com o valor Daniel armazenado. Não confundir com o destaque da linha 39. Essa linha foi onde coloquei o breakpoint, apenas isso. Ignorem-na.

Na linha enumerada com o 2 fiz um comando for para percorrer todos os cookies encontrados. Para isso fiz uso do método length, que retorna o tamanho dos cookies encontrados.

A linha 3 é bastante interessante, pois nela faço a transformação do vetor cookies[i] em uma matriz (ou vetor bidirecional, como preferirem), usando o sinal de igual como marcador de separação. Vejam a demonstração de como ficará nossa variável cookies[i] no debug:

Cookies - JavaScript

Perceberam que agora o que era apenas um dado (nomeUsuario=Daniel) agora são dois. O (nomeUsuario) e o (Daniel).

Na linha 4 defino o valor de cookies[i].name como sendo o valor da linha i posição zero da nossa matriz. Nesse exemplo a coluna zero equivale ao valor “nomeUsuario”. A função unescape apenas converte caracteres codificados para o formato ASCII, não se preocupe com ela agora.

Na linha 5 faço a comparação do valor da coluna zero com o nome do cookie que estamos procurando. Se for igual ele entra na linha 6, que armazenará o valor da mesma linha, porém da coluna 1, que no caso é o valor do cookie, ou seja, “Daniel”, na variável valorCookieEncontrado. As linhas abaixo da 6 apenas fazem o retorno do valor. Se foi encontrado alguma coisa, portanto se a variável é diferente de uma string vazia, ele retornará a própria variável. Se não, retornará nulo.

A linha 7 verifica se o valor retornado pela função leCookie e armazenado em valorCookie é nulo. Se não for ele exibe a mensagem de "Prazer em revê-lo, " com o nome do usuário concatenado. Se o valor for nulo ele entende que o usuário não está cadastrado e pede para que o mesmo digite seu nome.

Na linha 8 verificamos se algo foi digitado e exibimos a mensagem de saudação para quem foi cadastrado agora. Por fim, na linha 9 o código só vai entrar se o usuário não digitar nome algum e cancelar a tela para digitação do nome, então ele receberá uma saudação totalmente genérica.

Esse código em execução, caso não tenha um usuário cadastrado, gerará a seguinte exibição no navegador:

Cookies - Javascript

Então cadastro um usuário chamado Daniel, fecho a página e, quando a abro novamente:

Cookies - Javascript

O site lê o valor do cookie, e em vez de perguntar o nome, já exibe essa saudação personalizada! Conseguimos a tal persistência dos dados!

Para encerrar a parte dos cookies, vamos inserir um botão nessa página que, se pressionado, fará a exclusão do cookie de nome nomeUsuario.

Fiz um botãozinho simples:

<input type="button" value="Apagar" onclick="apagaCookie();" />

E um JavaScript tão simples quanto:

Cookies - JavaScript

Vejam que quando o botão for clicado e a função apagaCookie() é acionada eu estou gerando um cookie com o mesmo nome e um valor em branco (o valor aqui pouco importaria), mas com data de vencimento para exatamente agora. Isso fará com que o cookie morra imediatamente.



Notícias - Games

Atari VCS é finalmente lançado e surpreende

O Atari VCS foi lançado recentemente e trouxe suporte a praticamente todos os serviços de streaming de jogos já disponíveis. A única exceção foi por conta do Playstation Now, cujo suporte nativo não é oferecido, mas ele pode ser acessado através do modo PC do VCS, já que o console possui Googl...

Ler Notícia Completa

The King of Fighters XV já tem data para chegar

A SNK finalmente definiu uma data para lançamento do tão esperando The King Of Fighters XV. Segundo comunicado recente, o game de luta deve chegar em 17 de fevereiro de 2022 para os consoles Playstation 4, Playstation 5, Xbox Series X e S, além de PCs. O título contará com 39 personagens e mante...

Ler Notícia Completa

Phil Spencer aprovou o Steam Deck rodando o xCloud

O chefe da divisão XBOX e vice presidente da divisão de jogos da Microsoft, Phil Spencer, recebeu um Steam Deck e passou uma semana testando o dispositivo da Valve. Nas palavras dele: “trata-se de um dispositivo muito legal. É interessante ter os jogos disponíveis em qualquer lu...

Ler Notícia Completa

Conheça o Playstation 2 portátil criado por um brasileiro

Claudio Adriano decidiu criar uma versão portátil do console Playstation 2, da Sony. Inspirado no Nintendo Switch, o console ficou pronto depois de 2 anos de trabalho e algumas interessantes adaptações. Partindo de uma placa-mãe de um PS2 Slim, Claudio fez os encaixes necessários para que a pla...

Ler Notícia Completa

Playstation 4 já vendeu mais de 116 milhões de unidades

Embora a nova geração de consoles já tenha chegado definitivamente, o PS4 ainda vem registrando bons números e ultrapassou a marca dos 116 milhões de aparelhos vendidos ao redor do mundo. Possivelmente a confirmação da Sony de que títulos bastante esperados, como o novo God Of War e Horizon Forb...

Ler Notícia Completa

Nintendo Switch supera Xbox 360 e PS3 em número de unidades vendidas

Em números divulgados nesta quinta-feira (05) a Nintendo confirmou a quantia de 89 milhões de unidades vendidas do seu console Switch, deixando para trás o Playstation 3, com 87 milhões de unidades e o Xbox 360, com 80 milhões. O próximo console na lista para ser ultrapassado é o Wii, também da...

Ler Notícia Completa

Far Cry 5 está de graça para todas as plataformas por tempo limitado

A Ubisoft liberou o game Far Cry 5 entre os dias 5 e 9 de agosto para todas as plataformas (PS4, PS5, Xbox One, Series X e Series S, Google Stadia e PC). A notícia é ótima, claro, mas ao contrário do que normalmente acontece, o jogo só poderá ser jogado gratuitamente até o dia 9 de agos...

Ler Notícia Completa

PS5 com SSDs não originais apresentam ótimo resultado

A última atualização do PS5 permite que se faça a expansão do armazenamento do console. Embora o aparelho exija características específicas para os dispositivos de expansão, como taxa de leitura de 5Gb/s, ele funciona surpreendentemente bem com SSDs de velocidades inferi...

Ler Notícia Completa

Tudo sobre o Luna, o novo serviço de streaming de jogos da Apple

Na última terça-feira a Amazon deu detalhes sobre seu serviço de streaming de jogos, o Luna. Trata-se de um serviço por assinatura, semelhante ao que faz o Netflix com filmes e séries. Com ele os jogos são trazidos para o seu dispositivo, seja uma TV, computador ou mesmo o iPhone, através da Int...

Ler Notícia Completa

The Last of Us Part II já é o maior lançamento do ano dentre todos os consoles

[sem spoilers] The Last of Us Part II agradou a muitos e desagradou a poucos, mas o fato é que a expectativa pelo lançamento do jogo era gigante! A primeira versão do jogo ganhou todos os prêmios possíveis e é considerada por quem o jogou como, no mínimo, um excelente título. Era inevitável, por...

Ler Notícia Completa

BGS 2020 é adiada devido ao coronavírus

A Brasil Game Show deste ano será adiada para os mesmos dias de 2021. Em comunicado oficial feito ontem, a organização do evento esclareceu as razões para o adiamento e comunicou que a 13ª edição da maior feira de games da América Latina acontecerá entre os dias 8 e 12...

Ler Notícia Completa

Capcom Pro Tour sofre o cancelamento de algumas etapas por conta do coronavírus

Em um comunicado ao público via redes sociais, a Capcom revelou que algumas etapas do Capcom Pro Tour foram removidas do calendário como precaução contra o surto de coronavírus pelo mundo...

Ler Notícia Completa

Organização cancela Anime Japan 2020 por causa do coronavírus

Em meio à epidemia do novo coronavírus (COVID-19), a organização do Anime Japan 2020 cancelou o evento, que aconteceria entre 21 e 24 de março, a fim de evitar a proliferação do vírus. A feira, que traz diversas novidades sobre animes, não será adiada. Além disso, o evento Family Anime Festa 20...

Ler Notícia Completa

Você sabia?

O ábaco é o dispositivo de cálculo mais antigo construído e conhecido pelo homem. Suas formas mais primitivas datam de 400 a.C. e eles foram encontrados na China e na Babilônia. Para saber mais sobre a história dos computadores, clique aqui.

O filme Mortal Kombat, inspirado no jogo de mesmo nome, faturou 23 milhões de dólares apenas no fim de semana de estreia nos EUA. Ainda sobre este título de sucesso, outra cifra que impressiona é o faturamento ao longo do primeiro ano: 1 bilhão de dólares no mundo todo.

O épico jogo River Raid, do Atari, foi desenhado e boa parte de sua programação foi feita por uma mulher: Carol Shaw, uma excelente programadora e funcionária da Activision em 1982. Saiba mais sobre a história deste incrível jogo, aqui.

A empresa Take-Two pagou à Infogrames mais de 22 milhões de dólares pelos direitos de Civilization, em novembro de 1994. Ainda sobre este título, Sid Meier, um dos seus fundadores, é o profissional da área dos games mais premiado em todo o mundo.

Ajude o Contém Bits com um cafezinho!

Se você gostou do artigo, se ele lhe foi útil de alguma maneira e você quiser ajudar o Contém Bits, saiba que é simples, fácil e rápido. Basta clicar na imagem do PayPal (ou no cafezinho) e seguir as instruções, em ambiente seguro e com o respaldo do Paypal. Eu agradeço muito! :)


Você gostará destes vídeos!