Na primeira parte deste tema abordámos o que é um cookies, qual a sua finalidade e como funcionam, na segunda parte demos a conhecer que tipos de cookies existem, qual a sua estrutura bem como algumas dicas de segurança e privacidade.
Hoje vamos ter uma abordagem mais prática e vamos mostrar como podemos criar um cookie com javascript e como o podemos usar para, por exemplo, contar as visitas a uma página web.
Recapitulando, e em breves palavras, um cookie é um pequeno pedaço de informação enviado por um servidor web, armazenado no navegador da web, para que possa ser lido mais tarde, usado, por exemplo, quando um navegador armazena credenciais de login ou preferências de páginas.
Neste último artigo vamos analisar um cookie implementado em JavaScript. O código determinará quantas vezes o utilizador (visitante) carregou a página.
As linhas de 3 a 73 contêm o código necessário do cookie em JavaScript. A variável “DaysToLive” (na linha 15), pode de ser modificada. Nela é definido o número de dias que o cookie permanece no computador do utilizador (visitante). Não é necessário efetuar mais nenhuma alteração, basta copiar e colar o código do cookie na secção HEAD da página web.
As linhas 75 a 81 contêm uma função para iniciar uma janela pop-up.
Apenas navegadores habilitados para JavaScript podem exibir as demonstracoes de JavaScript.
As linhas 91 a 111 são uma demonstração de como usar o código do cookie JavaScript.
A linha:
visits = GetCookie('page_name');
É onde a página descobre quantas vezes o utilizador visitou a página. Se for a primeira visita, o valor da variável “visits” será o dígito 1. Se a segunda, o valor será 2, e assim por diante. No entanto, se o visitante tiver os cookies do navegador desativados, o número não será incrementado.
O parêntesis na chamada para a função GetCookie() contém o nome do cookie que mantém contagem. (O nome está entre plicas.) No exemplo, o nome do cookie é “page_name“.
Caso este código do cookie JavaScript seja utilizado apenas numa página, o nome do cookie fica como está ou com outro que se pretenda (apenas com caracteres alfanuméricos e sublinhados, sem espaços). No entanto, se o código do cookie for utilizado em diversas páginas, deve ter em atenção alguns aspetos:
- Se utilizar o mesmo nome do cookie em cada página, o valor da variável “visits” será o número total de exibições da página para cada página visitada (todas as páginas que possuem o código do cookie).
- Se utilizar nomes diferentes do cookie, o valor da variável “visits” será o número de exibições da página somente para as páginas que usam esse nome.
Imaginemos o seguinte, para a página web de início damos o nome de PaginaInicial ao cookie e para as restantes páginas do site damos o nome de RestantesPaginas. Quando o utilizador visitante carregar a página inicial, o valor da variável “visits” será igual ao número de vezes que o visitante carregou essa página. Quando o visitante carregar qualquer uma das outras páginas que não a página inicial, o valor da variável “visits” será o número total de vezes que o ele carregou as restantes páginas.
As linhas:
if(visits == 1) { document.write('
Bem-vindo!
‘); } if(visits == 2) { document.write(‘
Bem-vindo, novamente!
‘); } if((visits >= 3) && (visits <= 9)) { document.write(‘
Bem-vindo, amigo!
‘); } if(visits > 9) { document.write(‘
Bem-vindo, amigo leal!
‘); }
Determinam o conteúdo apresentado no cabeçalho da página.
Conforme o número de visita(s) à página (ou grupo delas), o cabeçalho apresenta:
- Primeira: “<h2>Bem-vindo!</h2>”
- Segunda: “<h2>Bem-vindo, novamente!</h2>”
- Terceira a nona: “<h2>Bem-vindo, amigo!</h2>”
- Posterior à nona visita: “<h2>Bem-vindo, amigo leal!</h2>”
Este exemplo pode ser utilizado para colocar conteúdo personalizado que bem entender na página web, dependendo do número de vezes que o visitante carregou a(s) página(s).
As linhas:
if(visits == 1) { Popup('primeiravisita.html',500,150); }
if(visits == 2) { Popup('segundavisita.html',500,150); }
if(visits == 15) { Popup('leal.html',600,200); }
Determina se uma função JavaScript é ou não executada, dependendo do número de vezes que o visitante carregou a(s) página(s).
Se for a primeira visita à página, a função Popup() é executada, apresentando numa janela pop-up com 500 píxeis de largura e 150 píxeis de altura. A janela de pop-up será a página encontrada primeiravisita.html. Para o ficheiro segundavisita.html seria exatamente a mesma situação mas com outra mensagem a apresentar ao utilizador, por exemplo (Obrigado por voltar!).
Cujo código neste caso seria:
|
Obrigado por nos visitar! |
Por fim, quando o utilizador visitasse a página pela 15a vez, a função era executada novamente, apresentando uma janela pop-up com 600 píxeis de altura e 200 de largura, com outra mensagem.
O restante código html inicial é:
Esta e uma demonstracao que utiliza JavaScript e cookies para determinar o numero de carregamentos de pagina e, assim, controlar o conteudo da pagina e janelas pop-up. Esta demonstracao apenas funciona se tiver o navegador configurado para aceitar cookies.
O titulo, “Bem-vindo … (X vez)” depende do numero de vezes que se acedeu a esta pagina. (Para aceder novamente basta atualizar a pagina).
Abaixo do titulo encontra-se uma afirmacao que indica quantas vezes que tentou aceder a esta pagina.
Ira aparecer uma janela pop-up na primeira, segunda e decima quinta visita, sendo que cada pop-up apresenta uma mensagem diferente.
Guarde a pagina no disco rigido caso pretenda estudar o codigo-fonte JavaScript e HTML.
E é desta forma que terminamos o assunto sobre os cookies. Podem fazer o download aqui para estudo e ver como toda esta “magia” acontece.