Criando, Deletando e Excluindo Cookie – JavaScript

Cookie JS

Cookie em JavaScript

Vamos iniciar mais um artigo aqui no Descascando Pepinos, já aproveito a deixa e peço desculpas pela falta de tempo, compartilhar idéias e novos artigos, o blog ficou meio de canto mas pretendo colocar um artigo semanal.

Bom a proposta agora para as postagens de artigo será mais voltado para parte de desenvolvimento Frontend (Javascript, Jquery, Ajax, Flex, HTML5 e CSS3), anteriormente estava criando artigos para área de negócios, publicidade, marketing digital, page rank e afins, em suma não deixarei de postar sobre isto mas o foco agora será mais desenvolvimento, caso queira partilhar algum artigo ou mesmo sugerir mande aqui nos comentários ou por e-mail cristofer.sousa@gmail.com.

Bom vamos lá, hoje irei discutir sobre Cookies em JavaScript essa semana que passou estava com uma demanda da empresa e precisei reavaliar vários pontos de como implementa-lo e principalmente que existe uma ressalva que o Google Chrome faz para quem pretende trabalhar com Cookie via localhost.

Como esse artigo está estruturado:

  • Introdução – O que é um Cookie?
  • Como criar um Cookie em JavaScript?
    1. Criar
    2. Exibir
    3. Excluir
  • Caso de Uso – Exemplo
  • Google Chrome vs Cookies via localhost
  • Conclusão

Introdução – O que é um Cookie?

Bem antes de começar acho que é válido explicar do que se trata um Cookie, basicamente ele armazena os dados do usuário do momento que ele entrou no seu site e isso fica salvo no computador dele! Entendeu?

Bom ainda há dúvidas, você deve estar se questionando como assim salva os dados do usuário no computador dele? Qual o beneficio de salvar no computador dele se eu quero acessar essa informação para mim!?

Vamos por partes, primeiramente é preciso estar claro que Cookie é a troca de informações entre servidor web e o navegador(browser), a cada requisição que usuário faz no site, caso o mesmo esteja pré-configurado ele pode ser implantado no seu computador, o intuito disto é salvar algumas informações e futuramente caso o usuário faça novas visitas naquele determinado site ele vai tomar uma decisão.

Exemplo:O momento que o usuário entra no site, ele pede para o usuário se identificar com seu nome, se em algum dia o usuário retornar novamente para aquele site ele irá trazer uma mensagem de boa vindas para o usuário dizendo Olá, @NomeDoUsuario! Veja aqui no link isto implementado via javascript.

Antes de colocar a mão na massa é necessário que tenha alguns cuidados para implementar o seu Cookie, existem algumas regras que devem ser levadas em conta:

  • Cada domínio pode ter apenas 20 Cookies.
  • Tamanho máximo permitido por Cookie 4kB(4000 caracteres).
  • Cookies só podem ser lidos pelo seu próprio domínios

OBS: Se você tem um cookie no site da UOL somente domínio do UOL poderá ler, se tentarem através do site Terra ler esse cookie não irão conseguir.

Bem acredito que até aqui você já entendeu a finalidade do Cookie, para que serve e como podemos utiliza-lo em nossas aplicações, certo?


Make Cookie

Como criar um Cookie em JavaScript?

Vamos agora para a parte interessante que é a implementação, bom essa parte recomendo que saiba trabalhar com Funções(function) em JavaScript, elas serão de suma importância para seu aprendizado, aprender também a trabalhar com métodos do JavaScript como getTime(), getDate() e assim por diante.

Iremos criar 3 Functions:

Criar
function setCookie(name,exdays)    //função universal para criar cookie

var expires;

var date; 

var value;
date = new Date(); //  criando o COOKIE com a data atual
date.setTime(date.getTime()+(exdays*24*60*60*1000));
expires = date.toUTCString();
value = "TESTE123";
document.cookie = name+"="+value+"; expires="+expires+"; path=/";
}
Exibir
function getCookie()
{
var c_name = document.cookie; // listando o nome de todos os cookies
if(c_name!=undefined && c_name.length > 0) // verificando se o mesmo existe
{
var posCookie = c_name.indexOf(cookieSeuNome); // checando se existe o cookieSeuNome 
if (posCookie >= 0) //se existir o cookie mostra um alert no browser
{
alert("Cookie Existe!!!");
}
else
alert("Cookie não existe!!!");
}
Excluir
function eraseCookie(name)
{
setCookie(name,-1); // deletando o cookie encontrado a partir do mostraCookie
}


Caso de Uso – Exemplo

Vamos para uma aplicação real agora, vamos abordar o que foi aprendido até aqui, vamos supor o seguinte cenário:
Vamos criar um Cookie e dele desejamos armazenar apenas se o usuário veio de algum site(indicado), caso ele não tenha visto então ele não deverá ter esse Cookie. Qual o fator motivacional de implementarmos isto? Imagine que você possua um site e você quer saber se o seus parceiros estão realmente dando um retorno de válido para seu site, como fazer isto? Em modo geral você teria um relatório que exibiria tudo isto mas e se quisermos algo mais simples e prático?

Pensando de forma abstrata, para codificarmos, todo site(parceiro) deve conter esse cookie, quando o usuário acessar o site do parceiro será implantado esse cookie agora imagine que seu site é divulgado por 10 sites parceiros, como você irá saber qual foi o parceiro que gerou essa divulgação? Existe uma propriedade no JavaScript que chama Document.Referrer ela traz para nós o retorno da url que o usuário navegou no caso se ele veio de algum parceiro irá vir http://www.parceirox.com.br.

Também devemos pensar no seguinte escopo como vamos supor que temos 10 parceiros que fazem divulgação do seu site devemos armazenar isso em um vetor se o document.referrer for igual ao parceiro ele vai manter o cookie na maquina do usuário senão ele irá deleta-lo, no caso deletar pois podemos imaginar que ao passar de um determinado prazo algum parceiro pode deixar de fazer publicidade para seu site no caso é so você fazer uma comparação para avaliar se o array com os dominoios

Definição e Uso
A propriedade referrer retorna o URL do documento que carregou o documento atual.

Sintaxe
document.referrer


Como o artigo está muito longo irei colocar a parte prática de como manipular o cookie -caso de uso em um segundo artigo, este primeiro artigo deixaremos apenas como teoria de como funciona o Cookie em JS.