ExtJS 4: Trabalhando com Cookies

Para quem não sabe, o ExtJS 4 tem uma classe que ajuda abstrair quando se precisa trabalhar com cookies. Essa classe se chama Ext.util.Cookies e está disponível na API desde a versão do ExtJS 3.

[caption id="attachment_5379" align="aligncenter" width="274"] http://www.instructables.com/image/FWM8RMHGX82ORQY/HTTP-Sugar-Cookies.jpg[/caption]

Para quem não sabe o que é um cookie, pode ler esse artigo aqui: http://pt.wikipedia.org/wiki/Cookie

Cookies usando JavaScript puro

O código abaixo peguei do artigo da wikipedia.

Criar

[code lang="js" firstline="1" toolbar="true" collapse="false" wraplines="false"]function setCookie(name, value, expires, path, domain, secure) {
var curCookie = name + "=" + escape(value) +
((expires) ? "; expires=" + expires.toGMTString() : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
document.cookie = curCookie;
}[/code]

Obter Valor

[code lang="js" firstline="1" toolbar="true" collapse="false" wraplines="false"]function getCookie(name) {
var dc = document.cookie;
var prefix = name + "=";
var begin = dc.indexOf("; " + prefix);
if (begin == -1) {
begin = dc.indexOf(prefix);
if (begin != 0) return null;
} else
begin += 2;
var end = document.cookie.indexOf(";", begin);
if (end == -1)
end = dc.length;
return unescape(dc.substring(begin + prefix.length, end));
}[/code]

Remover

[code lang="js" firstline="1" toolbar="true" collapse="false" wraplines="false"]function deleteCookie(name, path, domain) {
if (getCookie(name)) {
document.cookie = name + "=" +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
"; expires=Thu, 01-Jan-70 00:00:01 GMT";
history.go(0);
}
}[/code]

Cookies usando ExtJS

Vejam que não tem muita diferença do código acima para o código abaixo - na verdade eles fazem a mesma coisa. E se olharem o código fonte da classe Ext.util.Cookies podem ver que o ExtJS usa uma código muito parecido com o declarado acima. Mas o legal é que se você estiver trabalhando com ExtJS 4, pode usar apenas código ExtJS para fazer isso.

Criar

[code lang="js" firstline="1" toolbar="true" collapse="false" wraplines="false"]Ext.util.Cookies.set(name, value, expires, path, domain, secure);[/code]

Em ambos os códigos, os únicos parâmetros obrigatórios são o name e value (nome e valor). Os outros (expires, path, domain, secure) são opcionais. Mas o que significa cada um desses parâmetros?

  • name: nome do cookie; é a chave
  • value: valor do cookie
  • expires: validate do cookie (data); Note que a data será convertida para GMT.
  • path: caminho onde o cookie será válido. Valor padrão é "/", ou seja, todas as páginas
  • domain: domínio para restringir o acesso ao cookie (ex: loiane.com e assim todos os subdomínio também terão acesso ao cookie)
  • secure: valor true/false indica se o cookie deverá ser acessado apenas via SSL em uma página usando o protocolo HTTPS. Valor padrão é falso.
Exemplo:
Queremos criar um cookie para lembrar alguma opção do usuário como: não mostrar uma determinada popup e que expira apenas daqui a 1 ano:

[code lang="js" firstline="1" toolbar="true" collapse="false" wraplines="false"]var agora = new Date();
var validade = new Date(agora.getTime() + 365 * 24 * 60 * 60 * 1000);
Ext.util.Cookies.set('mostrarpopup','falso',validade);[/code]

Obter Valor

Obter o valor do cookie que acabamos de criar:

[code lang="js" firstline="1" toolbar="true" collapse="false" wraplines="false"]Ext.util.Cookies.get('mostrarpopup');[/code]

Remover

Deletar o cookie que criamos:

[code lang="js" firstline="1" toolbar="true" collapse="false" wraplines="false"]Ext.util.Cookies.clear('mostrarpopup');[/code]

Até a próxima! :)