Sei criar cookies em JavaScript, mas não sei como aplicar eles em algum projeto. Alguém poderia postar um exemplo de como usar cookies?
1 Resposta
Como respondi em Gravar cookie e ler seu valor ao aceder ao web site para verificar se expirado
Você deve usar document.cookie
para criar os cookies conforme a necessidade e o script deve rodar em um servidor (como Apache por exemplo), acesso local (protocolo file://
) geralmente não funciona com cookies.
note que alguns navegadores bloqueiam cookies gerados pelo
http://localhost
, para contornar o problema use o endereçohttp://127.0.0.1
Para criar um cookie devemos usar os parâmetros suportados são:
;path=
deve conter o caminho/path HTTP que poderá ser usado para limitar aonde o cookie deve ser acessível;expires=
deve conter data em formato GMT de quando vai expirar;max-age=
deve conter conter o tempo em segundos de quando o cookie deve expirar, não é necessário usarmax-age
eexpires
ao mesmo tempo;secure
especifica que o cookie só deve funcionar sobre o protocolo HTTPS
O nome do cookie (chave) e o valor podem ser codificados com encodeURIComponent
para evitar que caracteres como espaços ou ;
façam os dados se perderem.
Exemplo de com como criar um cookie:
document.cookie="<chave>=<valor>; expires=<data para expirar>; path=<caminho HTTP>";
Um exemplo de cookie que deve expirar em 31/12/2018 as 23:59:59 (em GMT):
document.cookie="chave=valor; expires=Mon, 31 Dec 2018 23:59:59 GMT;path=/"
Note que talvez ao invés de cookies você pode usar localStorage
e sessionStorage
(https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage)
Por exemplo com sessionStorage
:
// Salva dados
sessionStorage.setItem("foo", "bar");
// Pega os dados
alert( "foo = " + sessionStorage.getItem("foo"));
Por exemplo com localStorage
:
// Salva dados
localStorage.setItem("baz", "bar");
// Pega os dados
alert( "foo = " + localStorage.getItem("baz"));
A diferença entre sessionStorage
e localStorage
é que o primeiro expira sempre que o navegador é fechado, o segundo se mantém
Nota: se quiser usar
localStorage
com tempo para expirar veja esta outra resposta que criei Como fazer para que o Local Storage expire?
Mas como a questão sobre cookies, irei mostrar um exemplo com tal, então criei as seguintes funções:
function getCookie(k) {
var cookies = " " + document.cookie;
var key = " " + k + "=";
var start = cookies.indexOf(key);
if (start === -1) return null;
var pos = start + key.length;
var last = cookies.indexOf(";", pos);
if (last !== -1) return cookies.substring(pos, last);
return cookies.substring(pos);
}
function setCookie(k, v, expira, path) {
if (!path) path = "/";
var d = new Date();
d.setTime(d.getTime() + (expira * 1000));
document.cookie = encodeURIComponent(k) + "=" + encodeURIComponent(v) + "; expires=" + d.toUTCString() + "; path=" + path;
}
Para definir o seu cookie de ID, faça isto:
setCookie("chave", "valor");
Para ler o cookie que chamamos de chave
faça assim:
var resultado = getCookie("chave");
console.log(resultado); //Exibe o resultado ou exibe null se tiver expirado ou não for acessível a partir do PATH da URL atual
Para definir um tempo para expirar o cookie faça assim:
setCookie("foo", "baz", 3600);//Expira o cookie "foo" em uma hora
Para restringir o cookie somente a certas caminhos HTTP (rotas) use assim:
setCookie("bar", "baz", false, "/pasta2/");//o cookie só estara acessível em urls como http://site/pasta2/*
Se quiser definir um tempo para expirar em um PATH especifico use assim:
setCookie("bar", "baz", 86400, "/pasta3/");//o cookie só estará acessível em urls como http://site/pasta3/* e irá expirar em 24 horas