Cookies JavaScript
Os cookies permitem que você armazene informações do usuário em páginas da web.
O que são Cookies?
Cookies são dados, armazenados em pequenos arquivos de texto, em seu computador.
Quando um servidor da Web envia uma página da Web para um navegador, a conexão é encerrada e o servidor esquece tudo sobre o usuário.
Os cookies foram inventados para resolver o problema "como lembrar informações sobre o usuário":
- Quando um usuário visita uma página da web, seu nome pode ser armazenado em um cookie.
- Na próxima vez que o usuário visitar a página, o cookie "lembra" seu nome.
Os cookies são salvos em pares nome-valor como:
username = John Doe
Quando um navegador solicita uma página da Web de um servidor, os cookies pertencentes à página são adicionados à solicitação. Dessa forma, o servidor obtém os dados necessários para "lembrar" informações sobre os usuários.
Nenhum dos exemplos abaixo funcionará se o seu navegador tiver o suporte a cookies locais desativado.
Criar um cookie com JavaScript
JavaScript pode criar, ler e excluir cookies com a document.cookie
propriedade.
Com JavaScript, um cookie pode ser criado assim:
document.cookie = "username=John Doe";
Você também pode adicionar uma data de expiração (em hora UTC). Por padrão, o cookie é excluído quando o navegador é fechado:
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";
Com um parâmetro de caminho, você pode informar ao navegador a qual caminho o cookie pertence. Por padrão, o cookie pertence à página atual.
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
Ler um cookie com JavaScript
Com JavaScript, os cookies podem ser lidos assim:
let x = document.cookie;
document.cookieretornará todos os cookies em uma string como: cookie1=valor; cookie2=valor; cookie3=valor;
Alterar um cookie com JavaScript
Com JavaScript, você pode alterar um cookie da mesma forma que o cria:
document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
O cookie antigo é substituído.
Excluir um cookie com JavaScript
A exclusão de um cookie é muito simples.
Você não precisa especificar um valor de cookie ao excluir um cookie.
Basta definir o parâmetro expires para uma data passada:
document.cookie = "username=; expires=Thu, 01
Jan 1970 00:00:00 UTC; path=/;";
Você deve definir o caminho do cookie para garantir que exclua o cookie correto.
Alguns navegadores não permitem que você exclua um cookie se você não especificar o caminho.
A sequência de biscoitos
A document.cookiepropriedade se parece com uma string de texto normal. Mas não é.
Mesmo se você escrever uma string de cookie inteira em document.cookie, quando você a ler novamente, poderá ver apenas o par nome-valor dela.
Se você definir um novo cookie, os cookies mais antigos não serão substituídos. O novo cookie é adicionado a document.cookie, portanto, se você ler document.cookie novamente, obterá algo como:
cookie1 = valor; cookie2 = valor;
Se você deseja encontrar o valor de um cookie especificado, deve escrever uma função JavaScript que procure o valor do cookie na string do cookie.
Exemplo de cookie JavaScript
No exemplo a seguir, criaremos um cookie que armazena o nome de um visitante.
A primeira vez que um visitante chega à página web, ele/ela será solicitado a preencher seu nome. O nome é então armazenado em um cookie.
Na próxima vez que o visitante chegar à mesma página, ele receberá uma mensagem de boas-vindas.
Para o exemplo vamos criar 3 funções JavaScript:
- Uma função para definir um valor de cookie
- Uma função para obter um valor de cookie
- Uma função para verificar um valor de cookie
Uma função para definir um cookie
Primeiro, criamos um functionque armazena o nome do visitante em uma variável de cookie:
Exemplo
function setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
let expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
Exemplo explicado:
Os parâmetros da função acima são o nome do cookie (cname), o valor do cookie (cvalue) e o número de dias até que o cookie expire (exdays).
A função define um cookie adicionando o nome do cookie, o valor do cookie e a string de expiração.
Uma função para obter um cookie
Em seguida, criamos um functionque retorna o valor de um cookie especificado:
Exemplo
function getCookie(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for(let i = 0; i <ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
Função explicada:
Tome o cookiename como parâmetro (cname).
Crie uma variável (nome) com o texto a ser pesquisado (cname + "=").
Decodifique a string do cookie, para lidar com cookies com caracteres especiais, por exemplo, '$'
Divida document.cookie em ponto e vírgula em um array chamado ca (ca = decodedCookie.split(';')).
Percorra o array ca (i = 0; i < ca.length; i++) e leia cada valor c = ca[i]).
Se o cookie for encontrado (c.indexOf(name) == 0), retorne o valor do cookie (c.substring(name.length, c.length).
Se o cookie não for encontrado, retorne "".
Uma função para verificar um cookie
Por último, criamos a função que verifica se um cookie está definido.
Se o cookie estiver definido, ele exibirá uma saudação.
Se o cookie não estiver definido, ele exibirá uma caixa de prompt, solicitando o nome do usuário, e armazena o cookie do nome de usuário por 365 dias, chamando a setCookiefunção:
Exemplo
function checkCookie() {
let
username = getCookie("username");
if (username != "") {
alert("Welcome again " + username);
} else {
username = prompt("Please enter your name:", "");
if (username != ""
&& username != null) {
setCookie("username", username, 365);
}
}
}
Todos juntos agora
Exemplo
function setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
let expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue +
";" + expires + ";path=/";
}
function getCookie(cname) {
let name = cname + "=";
let ca
= document.cookie.split(';');
for(let i = 0; i < ca.length; i++)
{
let c = ca[i];
while (c.charAt(0) == '
') {
c = c.substring(1);
}
if (c.indexOf(name)
== 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function
checkCookie() {
let user = getCookie("username");
if (user != "")
{
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:", "");
if (user != "" &&
user != null) {
setCookie("username", user, 365);
}
}
}
O exemplo acima executa a checkCookie()função quando a página é carregada.