Juntando a idéia desse post do @gserrano sobre cookies (em ASP) e esse outro que fiz semana passada sobre orientação a objetos em javascript usando a biblioteca Prototype, tive a idéia de disponibilizar uma classe que fiz certa vez para gravar e ker cookies da máquina do usuário da sua aplicação.
*não vou aqui discutir a segurança e todos os outros pontos relativos ao não-uso de cookies (o qual concordo, mas certas vezes temos que fazer coisas na nossa vida profissional que vão contra nossos conceitos, né? :-/ )
Esse é o código da classe:
Cookie.prototype = {
//construtor padrão
initialize: function() {
},
/*
* salva cookie no formato {chave}={valor};
*/
setCookie: function(key, value) {
var the_cookie = key + "=" + value + ";" ;
document.cookie = the_cookie;
},
/*
* retorna valor do cookie
*/
getCookie: function (key) {
var search = key + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
}
A classe é bem simples: um método setCookie(key, value), o qual recebe uma chave e um valor; a chave é usada como o identificador do cookie, e o valor… bem, ele é o valor propriamente dito.
O outro método é o getCookie(key), que é chamado sendo passada a chave (identificador) referente ao cookie que você quer saber o valor que havia sido gravado.
Vale ressaltar que document.cookie é um comando (pensando se esse é o termo correto) nativo do javascript
Segue abaixo um exemplo funcional (html + javascript) onde há um formulário com dois campos. Ao clicar em salvar, é chamada a função que instancia o objeto Cookie e grava os valores. A outra função instância outro objeto Cookie e lê do cookie do browser do usuário, procurando a chave salva.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="prototype.js"></script>
<title>Cookie.js</title>
<script type="text/javascript">
var Cookie = Class.create();
Cookie.prototype = {
//construtor padrão
initialize: function() {
},
/*
* salva cookie no formato {chave}={valor};
*/
setCookie: function(key, value) {
var the_cookie = key + "=" + value + ";" ;
document.cookie = the_cookie;
},
/*
* retorna valor do cookie
*/
getCookie: function (key) {
var search = key + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
}
function salvarCookie() {
var ck = new Cookie();
ck.setCookie($F(´key´), $F(´value´));
}
function lerCookie() {
var ck = new Cookie();
alert(ck.getCookie($F(´key´)));
}
</script>
</head>
<body>
<h1>Cookie.js - teste</h1>
<form name="cookie" action="#">
<label for="key">chave:</label><input type="text" name="key" id="key" />
<label for="value">valor:</label><input type="text" name="value" id="value" />
<a href="#" onclick="salvarCookie(); return false;" title="salvar cookie">salvar cookie</a>
<a href="#" onclick="lerCookie(); return false;" title="ler cookie">ler cookie</a>
</form>
</body>
</html>