Tutoriais

Tudo sobre COOKIES,e suas Configurações By shadow_sjm

DESVENDANDO COOKIES

É sempre bom lembrar um pouco das informações sobre um visitante depois
que ele ou ela deixou o site: um nome de registro de entrada, a última
ocasião em que o visitante esteve presente ou, se você tem um site de
compras, as compras que o visitante fez. Para se lembrar dessas informações,
você terá que armazená-las em algum lugar.
Os cookies não são difíceis de usar, mas o código para salválos e
recuperá-los são um pouco desafiadores. Você pode usar código de outras
pessoas(indicarei algumas boas bibliotecas de cookies), mas ainda assim
é uma boa idéia saber como os cookies funcionam para que possa alterar
o código de bibliotecas para adequá-lo às suas necessidades.
Nesse artigo você aprenderá:

> O que são cookies.
> O que você pode e não pode fazer com eles.
> Como configurar um cookies.
> Como ler um cookies que você configurou.
> Como se lembrar de nomes e datas com cookies.
> Como montar um carrinho de comprar básico com cookies.
> Onde conseguir um bom código de cookie pré-escrito.

UM EXEMPLO DE COOKIES DO MUNDO REAL

Cookies são usador em todos os tipos de aplicativos. Um uso comum é para
determinar se um visitante viu a página antes. Por exemplo, na primeira
vez em que visitar http://book_of_javascript.tripod.survey.html, você
receberá uma pesquisa para preencher. Depois que enviar a pesquiza uma
vez, nunca mais a verá novamente, pois a página armazena um cookie em seu
computador para registrar aquela primeira visita. Cada vez que você visitar
a página, a página verifica se você tem o cookie; se tiver, ela não lhe
dará a pesquisa.
Um exemplo de cookie mais complexo é o site de compras de investidores
em vinhos clássicos da Austrália, em http://vineyarddirect.com.au/index.html.
Esse carrinho de compras do vendedor de vinhos, chamado JShop, vem de
http://www.jshop.co.uk/ e depende quase que inteiramente de JavaScript
e cookies.

O QUE SÃO COOKIES ?

Cookies são pequenas peças de informações que um site deixa no disco
rígido dos visitantes. Como as informações se encerram no disco rígido,
elas permanecem depois que saem da página atual e até depois que o
computador é desligado. Você julgará esse recurso extremamente útil quando
quiser lembrar-se de informações sobre um usuário, cada vez que ele ou ela
visitar seu site.
Os cookies foram introduzidos em Netscape 2.0 e no Microsoft Internet
Explorer 3.0. Infelizmente, MSIE 3.0 oferece uma implementação menos
perfeita: enquanto você pode usar cookies para salvar e ler informações
em computadores de outras pessoas, não pode salvar cookies em seu próprio
computador. Isso significa que você não pode testar o seu cookie em MSIE 3.0.
Você pode ver cookies salvados em seu computador, olhando o arquivo cookies.txt
de Netscape ou o diretório Cookies do MSIE. Em qualquer caso, verá uma
longa lista de nomes de sites, cada um com uma string de texto. O texto
pode parecer incompreensível para você, visto que a maioria dos sites
criptografa cookies de alguma maneira, para empacotar mais informações
neles. Mas dê uma olhada para ver quem deixou essas pequenas ameaças em
seu sistema - você descovrirá que é muito instrutivo.

O QUE COOKIES PODEM E NÃO PODEM FAZER

Porque cookies envolvem escrever e ler a partir dos discos rígidos de
seus visitantes, browsers amistosos para com cookie lidam com muitos aspectos
de segurança. Como resultado, usar cookie tem muitas limitações. As mais
importantes, para os objetivos deste artigo são estas:

1 - Ninguém tem um browser amistoso para com cookies.
2 - Ninguém que tenha um browser amistoso para com cookies escolhe aceitar cookies. (a maioria não o faz).
3 - Cada domínio pode ter apenas 20 cookies (portanto, use-os com parcimônia).
4 - Os cookies não podem exceder os 4 kilobytes. Isso é pouco mais que 4.000 caracteres - na verdade, muito.
5 - Um Website só pode configurar e ler seus próprios cookies(por exemplo, o Yahoo não pode ler os cookies da AOL).

Tenha essas limitações em mente quando estiver pensando em usar cookies em seu site.

COMO TRABALHAR COM COOKIES

Esta seção cobre todas as operações básicas de cookies: configuração,
leitura, reajuste e datas de encerramento de configuração.

COMO CONFIGURAR COOKIES

Configurar um cookies básico é simples; simplesmente crie uma string no
formulário cookie_nome=valor e depois ajuste a propriedade document.cookie
para aquela string. Felizmente, as funções escape() e unescape() codificarão
e decodificarão cookies, assim você não precisa se preocupar com essa
restrição.
Exemplo:

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
function setarCookie()
{
1 var o_nome = prompt("Qual é o seu nome?"."");
2 var o_cookie = "nome=" + escape(o_nome);
3 document.cookie = o_cookie;
alert("Obrigado!");
}

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨EXEMPLO A ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

Esse é um exemplo simples que armazena o nome de um visitante e um cookie
chamado nome. A primeira linha(1) da função do exemplo A pede por um
nome do visitante e o salva em o_nome. 2 cria a string para armazenar o cookie. A função
escape() substitui caracteres que os cookies não podem lidar por caracteres
legais. Por exemplo, se eu entrasse como paulo filipe na apresentação,
essa linha criaria a string nome=paulo%20filipe. O sinal de porcentagem
e 20(%20) substituem o espaçõ entre paulo e filipe.
A linha 3 configura o cookie. Para garantir que você configurou um cookie,
digite o seguinte em sua barra de localização do browser:

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
javascript:alert(document.cookie)

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

COMO LER COOKIES

É muito fácil ler um cookie que você salvou no disco rígido de alguém.
um exemplo:

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
function lerCookie()
{
1 var o_cookie = document.cookie;
2 var quebra_de_linha = o_cookie.split("=");
3 var o_nome = quebra_de_linha[1];
4 var o_nome = unescape(o_nome);
alert("Seu nome é: "+ o_nome);
}

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨EXEMPLO B¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

A primeira linha(1) no exemplo B é a importante. Sempre que o seu browser abre uma
página da Web, o browser le quaisquer cookies que o site tenha armazenado
em sua máquina e os carrega na propriedade document.cookie.
A parte ardilosa sobre a leitura de cookies é obter exatamente as informações
que você deseja deles. No exemplo B, tudo depois da primeira linha da função
puxa o nome do usuário para fora do cookie. Uma vez que 1 obtém o cookie,
2 rompe o cookie em um array de dois elementos, usando o método split().
O primeiro elemento no array consiste de tudo no cookie antes do sinal
de igual(=). Nesse caso, é nome, assim aquele é o primeiro elemento no
array. O segundo elemento no array é tudo depois do sinal de igual, que
é filipe%20. 3 agarra essa string a partir do array e armazena em the_name,
e 4 decodifica the_name com a função unescape(), trocando %20 por um
espaço.

COMO REAJUSTAR COOKIES

Para reset(reajustar)(mudar o valor de) um cookie, simplesmente ajuste
o seu nome para outro valor. Por exemplo, para saber sobre a última vez
que um visitante esteve em seu site, ajuste um cookie chamado date cada
vez que aquela pessoa visitar o seu site. O exemplo D relaciona uma página
da Web completa, que controla última vez que determinado visitante entrou
na página da Web.

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
< html><head><title>Cookie de Data</title>
< script>
function setarCookie()
{
var a_data = new Date();
var o_cookie = "data="+ escape(a_data);
document.cookie = o_cookie;
}

function lerCookie()
{
1 if (document.cookie)
{
var o_cookie = document.cookie;
var o_cookie_array = o_cookie.split("data=");
var a_data = unescape(o_cookie_array[1]);
document.write("A ultima vez que você visitou foi em: "+ a_data);
document.write("<br>");
}
}
< /script>
< /head>
< body>
Bem vindo!

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨EXEMPLO C ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

Carregar essa página chama as funções JavaScript lerCookie() (2) e
setarCookie() (3). A função lerCookie() verifica se o site ajustou um
cookie(1). Se a string entre os parênteses da cláusula if-then for false
ou a string nula(""), as linhas no corpo da declaração if-then não se
executarão, extraindo a data do cookie e escrevendo-a na página da Web
usando document.write().
Depois que lerCookie() faz isso, setarCookie() ajusta um novo cookie.
Essa função obtém a data atual e ajusta um cookie chamado data àquela
data. Cada vez que setarCookie() é chamada, ela substitui o último cookie
por um novo. Isso é exatamente como ajustar uma variável.

COMO CONFIGURAR MAIS DE UMA PARCELA DE INFORMAÇÕES

Acrescentar mais de uma parcela de informações a um cookie não é um problema.
Por exemplo, para armazenar o nome, idade e número de telefone de uma
pessoa, você deve configurar um cookie assim:

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
var o_cookie = "nome:paulo/idade:17/fone:32320087";
document.cookie="meu_cookie="+ escape(o_cookie);

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
Uma barra separa propriedade de nomes(nome do usuário, idade e telefone)
e dois-pontos distinguem as propriedades de nomes e valores(nome de usuário:
paulo,fone:32320087). A barra e os dois pontos são arbitrarios, você pode
usar quaisquer símbolos - desde que seja consistente.
É um pouco mais difícil tirar de um cookie múltplas parcelas de informações.
Tente usar arrays associativos para armazenas as informações. Por exemplo,
se você salvou

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
meu_cookie=nome:paulo/idade:17/fone:32320087

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
no disco rígido de algúem, você pode ler as informações em um array
associativo, exemplo de página:

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
< html><head><title>Cookie Complexo</title>
< script>
function lerOCookie(a_info)
{
var o_cookie = document.cookie;
var o_cookie = unescape(o_cookie);
var quebra_de_linha = o_cookie.split("=");
1 var os_valores = quebra_de_linha[1];
2 var separados = os_valores.split("/");
var propriedades = "";
3 for (loop = 0, loop < separados.length; loop++)
{
propriedades = separados[loop];
var quebra_info = propriedades.split(":");
var a_propriedade = quebra_info[0];
var o_valor = quebra_info[1];
4 a_info[a_propriedade] = o_valor;
}
}
function setarCookie()
{
var o_cookie = "meu_cookie=nome:paulo/idade:17/fone:32320087";
document.cookie = escape(o_cookie);
}
5 setarCookie();
6 var cookie_info = new Array();
7 lerOCookie(cookie_info);
< /script>
< /head>
< body>
Isso é o que eu sei sobre você

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨EXEMPLO D¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

Quando essa página carrega, (5) configura um cookie, (6) cria um novo
array e (7) envia o novo array, vazio à função "lerOCookie()". Primeiro,
a função obtém o cookie e divide o nome do cookie (meu_cookie). Depois,
(1), "os_valores" será igual a "nome:paulo/idade:17/fone:32320087", pois
é o que mostra que ajustamos o cookie na função "setarCookie()".
A seguir, (2) divide "os_valores" entre suas partes componentes, carregando
" nome:paulo" em "separados[0]", "idade:17" em "separados[1]" e "fone:32
320087" em "separados[2]".
Depois que a função interrompe "os_valores", (3) se curva sobre cada um
dos três elementos(nome,idade,fone) em "separados". Cada vez que ocorre
um loop, a função separa o elemento em duas partes, com os dois pontos.
Depois, ela carrega a primeira parte do elemento em "propriedades" e a
segunda parte em "o_valor". Na primeira vez que o loop percorre, "propri
edades" é "nome" e "o_valor" é "paulo". Uma vez o elemento separado, assim,
o array associativo a_info é carregado em (4). Depois da loop ocorrer
três vezes, você obtém esses resultados: a_info["nome"] = "paulo, a_info
["idade"] = "17" e a_info["fone"] = "32320087".
Com o array associativo adequadamente carregado, as três linhas começando
em (Cool recuperam as informações e as exibem em uma página da Web.

COMO AJUSTAR A DURAÇÃO DE UM COOKIE

Até agora, criamos cookies que desaparecem quando um usuário sai do browser.
À s vezes isso é bom. Uma vez que cada domínio só pode ter 20 cookies na
máquina de um usuário, você não quer disperdiçar espaço salvando cookies
desnecessários entre sessões de browser. No entanto, se quiser que os
seus cookies permaneçam no disco rígido de um usuário depois que ele sair
do browser, você precisa ajustar uma data de validade em um formato especial,
chamado GMT( no MSI6.0 e provavelmente em futuros browsers, GMT(Greenwich
Mean Time) tem sido substituído por UTC(Universal Time Code). São apenas
nomes diferentes para a mesma coisa, mas não se surpreenda se vir UTC
ao invés de GMT.) Por exemplo:

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
Sun, 12-Jan-1992 00:00 GMT

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
supostamente, é a data de nascimento em Greenwich Mean Time de HAL 9000,
o computador inteligente de 2001: uma odisséia no espaço. (HAL?HAL? Você
está ai?).
O formato GMT pode ser meio doloroso, especialmente se você precisa descobrir
se o dia era uma segunda feira, sexta feira ou o que for. Felizmente, o
método de data "toGMTString()" de JavaScript converte uma data em um
formato mais simples em uma data em formato GMT. Eis uma maneira fácil
de ajustar uma data, distante no futuro:

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
var a_data = new Date("December 31, 2023");
var o_cookie_data = a_data.toGMTString();

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
Para ajustar a validade do seu cookie, você precisa acrescentar a data
de término ao cookie. Acrescente "expires=data" à string e separa os
componentes do cookie com ponto-e-vírgula:

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
o_cookie=algumcookie;expires=data

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
O exemplo H mostra como montar um cookie que durará até o final do calendário
Maia:

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
function setarCookie()
{
var o_nome = prompt("Qual seu nome?","");
var a_data = new Date("December 31, 2023");
var o_cookie_data = a_data.toGMTString();
var o_cookie = "meu_cookie"+ escape(o_nome);
o_cookie = o_cookie+ ";expires="+ o_cookie_data;
document.cookie = o_cookie;
}

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨EXEMPLO E¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
Antes de "o_cookie" no exemplo E ser escapado(usando a função escape()),
ele se parecerá com a seguinte linha:

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
meu_cookie=paulo;expires=Fri, 31-Dec-2023 00:00:00 GMT

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
Uma vez ajustado, esse cookie vive no disco rígido de seu visitante até
a data de expiração.
Você também pode usar a data de expiração para apagar cookies, ajustando
a data para um tempo no passado. Isso pode ser útil se você estiver
usando cookie para registrar pessoas que entram e saem de seu site. Quando
um visitante registra a sua entrada, dê a ele um cookie que mostre que
eles se registraram. Quando ele quiser sair, apague o cookie.

QUEM PODE LER O COOKIE ?

Eu já mencionei que apenas o Web site que configura um cookie pode lê-lo
- McDonald's não pode ler cookies de Giraffas, e vice-versa. Porém, a
estória completa é um pouco mais complicada do que isso.

COMO PERMITIR QUE UMA PÁGINA LEIA UM COOKIE CONFIGURADO EM OUTRA

Por padrão, apenas a página da Web que configura o cookie pode lê-lo.
Se uma dessas páginas configurar um cookie, para permitir que outras
páginas em seu site leiam o cookie, você precisa ajustar o "path"(caminho)
do cookie. O caminho do cookie ajustar o diretório de nível "root"(raiz)
de seu site possibilita que todas as suas páginas da Web leiam o cookie.
Para fazer isso, acrescente "path=/;" ao seu cookie. Se você só quiser
que o seu cookie sejá legível em um diretório chamado arquivos, acrescente
" path=/arquivos;".

COMO LIDAR COM MÚLTIPLOS DOMÍNIOS

Alguns Web sites têm muitos pequenos domínios. Por exemplo, o portal da
Web Yahoo tem um site principal(www.yahoo.com) um site de finanças
(finances.yahoo.com), um site personalizado (my.yahoo.com) e muitos outros.
Por padrão, se uma página da Web em finances.yahoo.com ajusta um cookie,
páginas em my.yahoo.com não podem ler aquele cookie. Mas se você acrescentar
" domain=nome_do_dominio" a um cookie, todos os domínios terminados com
" nome_do_dominio" podem ler o cookie. Para permitir que todas as máquinas
no domínio yahoo.com leiam um cookie, Yahoo precisa acrescentar "domain
=yahoo.com" ao cookie.

O COOKIE INTEIRO

Acrescentar uma data de expiração, domínio e caminho a um cookie o torna
bastante grande. o exemplo I relaciona uma função que ajusta todas essas
variáveis para que você possa ver todo o quardo em um exemplo:

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
function setarCookie()
{
var o_nome = prompt("Qual seu nome?","");
var a_data = new Date("December 31, 2023");
var o_cookie = escape(o_nome) + ";";
var o_cookie = o_cookie + "path=/";
var o_cookie = o_cookie + "domain=cade.com;";
var o_cookie = the_cookie+ "expires"+ a_data.toGMTString() +";";
document.cookie = "meu_cookie="+o_cookie;
}

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨EXEMPLO F¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

O exemplo F resulta em um cookie que se parece com isso(antes de escapá-lo):

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
meu_cookie=paulo;path=/;domain=cade.com;expires=Sun, 31 Dec 2023 00:00:00 GMT;

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
É claro que, pelo fato de eu estar ajustando o domínio para cade.com,
apenas um computador no computador no CADE pode ler esse cookie.

COMO AJUSTAR MÚLTIPLOS COOKIES

Às vezes só um cookie não é o suficiente. Por exemplo, se o seu Web site
tem dois aplicativos JavaScripts diferentes - um que usa cookies para
armazenar informações sobre seus visitantes e outro que usa cookies para
rastrear as compras deles - provavelmente você vai querer armazenar esses
dois tipos de informações em cookies diferentes.
Para salvar múltiplos cookies, apenas dê um nome diferente a cada cookie.
Ajustar "document.cookie" a um cookie com um novo nome não apaga os cookies
que já está lá. Eis um pouco de código que ajusta dois cookies:

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
var cookie_visitante = "pessoa="+ escape("nome:paulo/ocupação:estudante
/fone:32320087");
document.cookie = cookie_visitante;
var cookie_compras = "compras="+ escape("camisas:1/bermudas:3/sapatos:12");
document.cookie = cookie_compras;

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
Esse código ajusta "document.cookie" duas vezes, mas, devido ao fato de
que os cookies têm nomes diferentes, você pode armazenar ambos em "docu
ment.cookie". Depois de executar as quatro linhas acima, "document.cook
ie" se parece com isso(exceto pelos caracteres escapados):

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
pessoa=nome:paulo/ocupação:estudante/fone:32320087;compras=camisas:1/be
rmudas:3/sapatos:12

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
No exemplo acima, armazenar dois cookies em "document.cookie" funciona
bem, pois o JavaScript que olha as informações de compra não precisa
lidar com as informações no outro cookie. Infelizmente, é um pouco difí
cil puxar o conteúdo de um cookie para fora de "document.cookie", porque
ele contém múltiplos cookies. É aqui onde as bibliotecas JavaScript pré-
escritas tornam-se úteis.

BIBLIOTECAS DE COOKIE

Você encontrará muitas bibliotecas de cookies gratuitas na Web. Basta
usar qualquer máquina de busca e procurar por "javascript cookie" para
conseguir uma lista. Geralmente as funções nas bibliotecas vêm prontas
para executar; assim, você só precisa corá-las e colocá-las em suas páginas
da Web. Webmokey tem bibliotecas excepcionalmente bem comentadas, portanto,
usaremos aqui o seu código. Você pode saber mais sobre código gratuito
Javascript de Webmonkey em http://hotwired.lycos.com/webmonkey/programm
ing/javascript/code_library/.

O CÓDIGO DE WEBMONKEY PARA ACCESSAR MÚLTILOS COOKIES

O exemplo G mostra o código da Webmonkey para acessar um cookie quando
" document.cookie" está armazenando múltiplos cookies.

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
function WM_readCookie(name) {
if(document.cookie=="") { // não tem nenhum cookie
return false;
} else { // tem algum cookie
var firstChar, lastChar;
var theBigCookie = document.cookie;
firstChar = theBigCookie.indexOf(name); // encontre o começo de "name"
var NN2Hack = firstChar + name.length;
{ // se encontrar o cookie
if ((firstChar != -1) && (theBigCookie.charAt(NN2Hack)=="="))
firstChar += name.length + 1;
// encontrar o final do valor da string (o próximo ";"),
lastChar = theBigCookie.indexOf(";", firstChar);
if(lastChar == -1)
{
lastChar = theBigCookie.length;
return unescape(theBigCookie.substring(firstChar,lastChar));
} else { Se não tiver nenhum cookie com esse nome, retornar falso.
return false;
}
}
} // WM_readCookie

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨EXEMPLO G¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
Para usar essas funções, corte-as e cole-as na página e chame as funções
de acordo. Para recuperar um cookie chamado oUsuario, chame a função
WM_readCookie("oUsuario").
As funções bem comentadas da Webmonkey falam por si mesmas. Se você usá-
las, leia-as uma primeira vez e tenha certeza de que entendeu como elas
funcionam.

CARRINHO DE COMPRAS BÁSICO

Esta seção discute o código que representa o começo de um script de car
rinho de compras. Definitivamente, você não quer usar esse código para
executar o seu próprio carrinho de compras - ele é muito simplista. Por
exemplo, você não pode remover um item da cestas uma vez que o tenha
selecionado. Você encontrará um programa de carrinho de compras JavaScript
mais completo(gratuito ou muito caro) na Web. Simplesmente busque "Java
script shopping cart" em qualquer máquina de busca e encontrará uma lista
de aplicativos.
Um aplicativo completo de carrinho de compras é bem longo, mas o código
abaixo deve dar a você um sentido do que está envolvido na montagem de
sua própria cesta de compras JavaScript, ou entender a de alguém, o exe
mplo H mostra o código de uma página principal de um carrinho de compras
simples.

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
< html><head><title> Bem vindo as Compras </title>
< /head>
< body>
Bem vindo as compras

Aqui você pode compras:<br>
< a> Equipamentos de computador</a> e <br>
< a> Roupas</a><br>
< p>
Quando você terminar de escolher os iténs, você pode
< form>
1 <input>
< /form>
< /body>
< /html>

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨EXEMPLO H¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

O único recurso novo e interessante no exemplo H é (1) que redireciona
os visitantes para a página "checkalos.html"(discutida em exemplo K),
quando eles clicam no botão de saída.
O exemplo I mostra o código d euma das páginas onde você pode comprar
um produto:

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
< html><head><title>Roupas</title>
1 <script></script>
< /head>
< body>
Compre essas roupas!

<form>
Camisa:
< input>
2 <input>
(R$20 cada)
< p>
Calça:
< input>
< input>
(R$40 cada)
< p>
< a> Volte à pagina principal</a>
ou<br>
< form>
< input type="button" value="checkalos" onClick="window.location=checkal
os.html";">
< /form>
< /body>
< /html>

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨EXEMPLOI¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

A maior parte dessa página descreve o formulário que relaciona o que os
visitantes podem comprar. Cada item tem um botão próximo a ele que perm
ite a você comprar o item. Pressionar aquele botão(como em (2)) chama a
função "adicione()", que toma três parâmetros: a quantidade do item a
comprar, qual é o item e quanto ele custa. Surpreendentemente, a função
" adicione()" não está armazenada nessa página da Web, mas em um arquivo
chamado compras.js(exemplo N), um arquivo de texto normal que lê o arqu
ivo compras.js na página e o interpreta, em (1). Essa técnica é muito
ú til quando você tem um conjunto de funções que se aplica a muitas pági
nas. Em nosso exemplo, todas as páginas de compras no site precisarão
da função "adicione()", portanto, ao invés de cortar e colar essa funçã
o em cada página, podemos usar (1) para chamar as funções de compras.js.
Você também achará esse recurso extremamente útil quando quiser mudar a
função. Ao invés de precisar procurar em cada lugar que cortou e colou,
você só precisa mudá-la uma vez no arquivo compras.js. Quando ela tiver
sido mudada de lá, qualquer página que usa o arquivo compras.js carrega
rá a versão alterada. Ai vai o código de compras.js:

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
function adicione(quantidade, item, preco)
{
1 var compra_string = escape(item + ":" + quantidade +":" + preco);
2 var o_cookie=WM_readCookie("compras");
3 if (o_cookie)
{
4 compra_string = o_cookie+ "/" + compra_string;
}
5 WM_setCookie("compras",compra_string.0,"/");
}

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨EXEMPLO J¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

A função adicione() em compras.js cria uma string a ser salva em cookie
(1) no formulário "item:quantidade:preco". Depois, a função usa Webmonk
ey WM_readCookie() para ver se o visitante já recebeu um cookie chamado
" compras"(2) e (3). Se já houver um cookie, (4) coloca uma barra de enc
aminhamento (/) ao seu final e acrescenta a string criada em (1). Cada
vez que um visitante comprar um item, o cookie recebe uma barra, seguida
pelo nome do item. Se você tivesse comprado uma camisa e um par de calç
as, o cookie se pareceria com isso:

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
compras=camisa:1:20/calca:1:40

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
Se depois você comprasse outra camisa, o cookie se pareceria com isso:

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
compras=camisa:1:20/calca:1:40/camisa:1:20

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
Uma versão mais completa de "adicione()" perceberia que você ja tinha
comprado uma camisa e, ao invés de incluir outra "camisa:1:20" ao final
do cookie, acrescentaria um a quantidade de camisetas:

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
compras=camisa:2:20/calca:1:40

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
No entanto, visto que tal pequna mudança envolve uma quantidade razoável
de código, estou deixando isso de fora. procure em bibliotecas carrinhos
de compras completos.
Depois da nova string cookie ter sido montada, (5) usa a função "WM_set
Cookie()" da biblioteca Webmonkey para salvar as informações de cookie
do visitante.
A página final a considerar é a página de saída, relacionada no exemplo
O:

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
< html><head><title>Checkalos</title>
1 <script></script>
< /head>
< body>
Aqui está sua cesta

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨EXEMPLO K¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

A página de saída carrega no arquivo compras.js em (1) exatamente como
a página de produtos no exemplo I. Embora haja um pouco de HTML nessa
página, a maior parte do que você vê quando visita essa página é gerado
pela função "checkAr()", que escreve o conteúdo do cookie de compras na
página, e a função "lerOCookie()", que lê o cookie e o formata de manei
ra a tornar o trabalho da função "checkAr()" mais fácil. o exemplo L
relaciona essas funções:

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
1 function lerOCookie(a_info)
{
var separacao;
2 var o_cookie=WM_readCookie("compras");
if (o_cookie)
{
3 if (o_cookie.indexOf("/") != -1)
{
separacao = o_cookie.split("/");
4 for (var loop=0; loop < separacao.length; loop++)
{
5 a_info[loop] = separacao[loop];
}
} else {
6 a_info[0] = o_cookie;
}
}
}
}
function checkAr()
{
var total=0;
var a_separacao = new Array();
7 lerOCookie(a_separacao);
document.writeln("<table>");
document.writeln("<th>Item</th><th>Quantidade</th><th>Preço</th><th>Subtotal</th>");
8 for (var loop=0; loop<a_quantidade.length; loop++)
{
9 var esse_item = a_separacao[loop].split(":");
10 document.writeln("<tr>");
11 for (var inloop=0; inloop < esse_item.length; inloop++)
{
document.writeln("<td>");
document.writeln(esse_item[inloop]);
document.writeln("</td>");
}
sub_total = esse_item[1] * esse_item[2];
12 total += sub_total;
13 document.writeln("<td>"+ sub_total + "</td>");
document.writeln("</tr>");
}
document.writeln("<tr>");
document.writeln("<td>total</td>");
document.writeln("<td></td><td></td><td>" + total + "</td>");
14 document.writeln("</tr>");
document.writeln("</table>");
}

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨EXEMPLO L¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
A FUNÇÃO "lerOCookie()"

a função "checkAr()" cria um novo array, vazio, e passa o array para a
função "lerOCookie()" (7). A função "lerOCookie()" interrompe o cookie
em cada item comprado e carrega os itens no array. (2) lê o cookie usan
do a função WM_readCookie(). Se houver um cookie "compras"(que o visita
nte deve ter ajustado, clicando em um item), (3) determina se o visitan
te comprou mais do que um item. Se ele ou ela comprou apenas um item,
aquele item é carregado no array, na posição 0 (6). Se ele ou ela compr
ou dois ou mais itens, aparece uma barra de encaminhamento entre eles e
o cookie se divide no array "separacao". Depois, em (5) a loop copia tudo
no array "separacao" em "a_info", o array é enviado para a função em (1).
Ao final de "lerOCookie()," "a_info" contém todos os itens comprados.

A FUNÇÃO "checkAr()"

Visto que "lerOCookie()" carrega as informações do cookie em "a_info",
" checkAr()" escreve os itens comprados na página da Web.(Cool percorre cada
elemtento "a_info" que contém um item comprado. Se o primeiro item comp
rado for um par de calca, o primeiro elemento no array aparece como: "c
alca:1:40. (9) então divide esse elemento com dois pontos, carregando
os três elementos resultantes no array "esse_item".
O restante do código escreve na tabela. (10) começa uma nova fileira e
(11) envolve cada elemento de "esse_item" entre as guias "<td>" e "</td>".
A linha (12) calcula quanto "esse_item" custa, multiplicando o preço do
item("esse_item[1]") pela quantidade comprada(esse_item[2]). Se o prime
iro elemento em "a_info" for "calca:1:40", então "esse_item[0]" é calca,
" esse_item[1]" é 1 e "esse_item[2]" é 40, devido à divisão em (9). Então,
(12) multiplica 1 por 40 para obter o subtotal, e (13) acrescenta esse
subtotal ao total, escrito na página em (14).
Ainda que o carrinho de compras acima exija muito de JavaScript, cada
uma de suas funções é curta e bem fácil de entender. Aplicativos compli
cados como carrinhos de compras normalmente são apenas grupos de funções
pequenas que trabalham juntas.
Uma vez que você tenha entendido o básico de JavaScript, a parte díficil
de escrever um aplicativo é descobrir quais funções você precisa e como
elas se inter-relacionam. Essa é a arte de programação, e vem apenas com
muita prática. Se entender o código do carrinho de compras acima mas pe
nsa que não pode escrevê-lo, você mesmo, pratique escrevendo scripts me
nores - em breve você estará lidando com ele.

RESUMO

Os cookies são um recurso avançado de JavaScript e podem acrescentar mu
ita funcionalidade ao seu site. Além de configurar um carrinho de compr
as, você pode usar cookies para saber como e com quantas frequências um
visitante vem ao seu site, e salvar as preferências personalizadas que
os visitantes podem ajustar. Se esteve atento a todo esse artigo, agora
você sabe:

> O que são cookies.
> Como configurar um cookie básico
> Como fazer um cookie durar depois que o usuário desligou seu computador
> Como controlar quais páginas podem ler o seu cookie.
> Como armazenar mais de uma parcela de informações em um cookie.
> Como ajustar e ler mais de um cookie.
> Como criar um arquivo JavaScript separado que outros arquivos HTML po
ssam incluir.
> Onde encontrar bibliotecas de cookies JavaScript.
> O básico de como um script de carrinho de compras funciona.

INDICAÇÃO

Escreva uma página que funcione como a página descrita no ínicio do art igo. A primeira vez que um visitante vir a página, ele ou ela deve obter uma caixa de aviso que diz, "Bem vindo, novo visitante" na próxima visi ta, tal caixa de aviso não deve aparecer.