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 acessa-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.



Algumas notícias

O que acontece com o cérebro no exato momento em que morremos

O que passa em nossa cabeça no momento da morte? Não se sabe exatamente e, embora os cientistas tenham alguma resposta, a resposta continua sendo um grande mistério. Além de difícil solução, tentar respondê-la pode criar implicações éticas. No entanto, uma equipe de cientistas da Universidade...

Ler Notícia Completa

Operada e devolvida ao útero, menina que nasceu duas vezes hoje 'acorda sorrindo toda manhã'

Um bebê pode nascer duas vezes? Não é o caso da absoluta maioria das crianças, mas foi assim para a pequena Lynlee Boemer. Em outubro de 2015, sua mãe, Margaret Boemer, descobriu que estava grávida de gêmeos. Ela sofreu um aborto espontâneo, mas um dos bebês sobreviveu. Com dez semanas de ges...

Ler Notícia Completa

Médicos dizem estar perto de chegar a exame de sangue para todos os tipos de câncer

Cientistas dizem que estão mais perto de criar um exame de sangue universal, capaz de identificar todos os tipos de câncer. Estudo conduzido com 1.005 pacientes por uma equipe da Universidade Johns Hopkins, dos Estados Unidos, testou um método que detecta oito tipos de proteínas e 16 mutações ge...

Ler Notícia Completa

Formato JPEG está com os dias contados

Há quantos anos você ouve falar em arquivos JPG? O formato já era utilizado nos primórdios da web comercial nos anos 1990, vivendo há mais de 20 anos como o principal método de compressão de imagens do público. No que depender de Google, Mozilla e outras empresas, isso pode mudar dentro de algum...

Ler Notícia Completa

EUA aprovam 'droga viva', 1ª terapia contra câncer que reestrutura sistema imunológico do paciente

Os Estados Unidos aprovaram o primeiro tratamento que reestrutura o sistema imunológico do paciente para atacar o câncer. A agência reguladora de medicamentos do país - a FDA - diz que a decisão foi um momento "histórico" e que a medicina agora "entra em uma nova fronteira". A companhia Novar...

Ler Notícia Completa

Cientistas norte-americanos criaram anticorpo capaz de atacar 99% das variações de HIV

Um grupo formado por pesquisadores do Instituto Nacional de Saúde (NIH), dos Estados Unidos, e da empresa farmacêutica Sanofi criaram em laboratório anticorpos superdesenvolvidos capazes de atacar 99% das cepas de HIV. O feito é ainda mais significativo por ser capaz até mesmo de prevenir a infec...

Ler Notícia Completa

Facebook investirá mais de US$ 1 bilhão em conteúdo original em 2018

Anunciada em agosto, a plataforma original de vídeos do Facebook, Watch, parece ser a grande aposta de Mark Zuckerberg para o ano que vem. De acordo com o TechCrunch, a empresa deve investir US$ 1 bilhão para criar e incentivar iniciativas voltadas para a produção de conteúdo audiovisual exclu...

Ler Notícia Completa

Software da Adobe é capaz de manipular gravações de voz e criar frases com perfeição

O software se chama Voco, foi desenvolvido pela Adobe (a mesma criadora do Photoshop) e permite manipular gravações de voz com uma precisão inédita, inclusive criando frases que a pessoa não disse. Na demonstração do app, um técnico forjou uma gravação em que um homem dizia “eu beijei a Jordan...

Ler Notícia Completa

Games nos Jogos Olímpicos de 2024. Será?

Sabe aquela discussão sobre os jogos eletrônicos poderem ou não ser considerados esportes? Pois o comitê responsável pela realização dos Jogos Olímpicos de 2024 acaba de colocar mais um pouco de lenha nesta fogueira. Isso aconteceu através da divulgação de que eles gostariam de incorporar torne...

Ler Notícia Completa

Algoritmo de Inteligência artificial sabe quando você está sonhando

Pesquisadores da Divisão de Medicina do Sono do Hospital Geral de Massachusetts desenvolveram um algoritmo capaz de identificar quando uma pessoa está sonhando. A tecnologia usa sinais de rádio frequência, através de um dispositivo semelhante a um roteador Wi-Fi, para monitorar a pessoa durante...

Ler Notícia Completa

Equipamentos hospitalares podem ser facilmente hackeados, afirma o governo dos EUA

A equipe de emergências digitais de sistemas de controle industrial dos EUA (ICS-CERT) emitiu ontem um alerta chamando atenção para falhas de segurança em alguns equipamentos hospitalares. As brechas são bastante graves, tanto que, segundo o comunicado, "um atacante com pouca habilidade poderia...

Ler Notícia Completa

Cientistas desvendam segredos de concreto super-resistente criado na Roma Antiga

Pesquisadores desvendaram a química do concreto romano que há milhares de anos resiste à erosão do tempo. Barragens marítimas construídas na época da Roma Antiga empregavam uma mistura de cal e cinzas vulcânicas para manter as rochas unidas. Agora, cientistas descobriram que elementos do materi...

Ler Notícia Completa

Inteligência artificial do Google aprende sozinha a andar e saltar obstáculos

A DeepMind, empresa de inteligência artificial do Google, divulgou ontem três estudos sobre o uso de sistemas de aprendizagem de máquina para ensinar robôs a andar. Os sistemas permitiam que máquinas aprendessem sozinhas a andar em um ambiente simulado. Segundo a empresa, dominar o controle mo...

Ler Notícia Completa

Vírus Petya apavora usuários e empresas ao redor do mundo nesta terça-feira. Saiba como se proteger.

Um novo malware está apavorando usuários ao redor do mundo nesta terça-feira, 27 de junho. Trata-se de mais um Ransomware, que sequestra os dados dos computadores, criptografando-os e solicitando um pagamento em troca da senha capaz de disponibilizar os arquivos novamente. Este malware foi bati...

Ler Notícia Completa

Você sabia?

O personagem Mario só possui bigode porque quando ele foi criado, em 1981, a resolução de tela dos equipamentos disponíveis não permitia que fosse desenhada uma boca, então os desenvolvedores fizeram o grande bigode para contornarem essa limitação tecnológica.

O famoso título Final Fantasy, da Square Enix, tem este nome exatamente porque se tratava da última esperança da empresa, que estava à beira da falência quando o lançou. Clique aqui e conheça detalhes dessa história.

O título Asteroids, do Atari, possui recorde de pontuação há 30 anos. Em 1982 um americano chamado Scott Safran atingiu a marca de 41.336.440. Atualmente ele faz parte de um minúsculo grupo de jogadores que conseguiram manter seus recordes por mais de 30 anos.

O jogo Final Fantasy X para o Sony Playstation 2 vendeu, apenas no dia do seu lançamento, 1.455.732 cópias, estabelecendo um recorde de vendagem para as primeiras 24 horas de um game. Méritos da SquareSoft, que desenvolveu um excelente game!

Você gostará destes vídeos: