Cookies JavaScript
- Página Anterior Tempo JS
- Próxima Página Introdução à API Web
Os cookies permitem que você armazene informações do usuário nas páginas da web.
O que são cookies?
Os cookies são dados armazenados em pequenos arquivos de texto no seu computador.
Quando o servidor web envia a página para o navegador e a conexão é fechada, o servidor esquece tudo sobre o usuário.
Os cookies foram inventados para resolver como lembrar as informações do usuário:
- Quando o usuário visitar a página da web, seu nome pode ser armazenado em cookies.
- Quando o usuário visitar a página novamente, o cookie "lembrará" seu nome.
Os cookies são armazenados em pares de nome e valor, como:
username = Bill Gates
Quando o navegador solicita uma página do servidor, os cookies pertencentes à página são adicionados à solicitação. Dessa forma, o servidor obtém os dados necessários para "lembrar" as informações do usuário.
Se o navegador tiver suporte local de cookies desativado, os seguintes exemplos não funcionarão.
Criação de cookies pelo JavaScript
O JavaScript pode usar document.cookie Criação, leitura e exclusão de cookies.
Pelo JavaScript, você pode criar cookies assim:
document.cookie = "username=Bill Gates";
Você ainda pode adicionar uma data válida (horário UTC). Por padrão, o cookie é excluído quando o navegador é fechado:
document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC";
Pela caminho Parâmetros, você pode informar ao navegador qual caminho o cookie pertence. Pelo padrão, o cookie pertence à página atual.
document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";
Ler cookie através do JavaScript
Pode ler cookie através do JavaScript da seguinte forma:
var x = document.cookie;
document.cookie Retornará todos os cookies em uma única string, por exemplo: cookie1=value; cookie2=value; cookie3=value;
Alterar cookie através do JavaScript
Ao usar JavaScript, você pode alterá-lo da mesma forma que criou o cookie:
document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";
O cookie antigo é substituído.
Excluir cookie através do JavaScript
Excluir cookie é muito simples.
Ao excluir o cookie, não é necessário especificar o valor do cookie:
Directamente expires Defina os parâmetros como 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 o cookie correto seja excluído.
Se você não especificar o caminho, alguns navegadores não permitirão que você exclua o cookie.
String de Cookie
document.cookie A propriedade parece uma string de texto normal. Mas não é.
Mesmo que você forneça document.cookie Escreva uma string completa de cookie, quando lido novamente, você só verá o parâmetro nome-valor.
Se um novo cookie for configurado, o cookie antigo não será substituído. O novo Cookie será adicionado a document.cookie, então se você ler document.cookie, você obterá algo como:
cookie1 = value; cookie2 = value;
Se você quiser encontrar o valor de um cookie específico, você deve escrever uma função JavaScript para procurar o valor do cookie na string do cookie.
Exemplo de JavaScript Cookie
Nos exemplos a seguir, criaremos um cookie para armazenar o nome do visitante.
Quando o visitante chegar pela primeira vez à página, será solicitado a preencher o nome. Em seguida, esse nome será armazenado no cookie.
Quando o visitante chegar novamente à mesma página, ele receberá uma mensagem de boas-vindas.
Por exemplo, criaremos 3 funções JavaScript:
- Função para configurar o valor do cookie
- Função para obter o valor do cookie
- Função para verificar o valor do cookie
Função para configurar o cookie
Primeiro, criamos uma função que armazena o nome do visitante na variável cookie:
exemplo
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
Explicação do exemplo:
Os parâmetros dessa função são: o nome do cookie (cname), o valor do cookie (cvalue) e o número de dias que o cookie expira (exdays).
A função configura o cookie somando o nome do cookie, o valor do cookie e a string de expiração.
Função para obter o cookie
Em seguida, criamos uma função que retorna o valor do cookie especificado:
exemplo
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
Explicação da função:
Usar o cookie como parâmetro (cname).
Criar uma variável (name) e o texto a ser pesquisado (CNAME”=”).
Decodificar a string do cookie, lidar com cookies com caracteres especiais, por exemplo, “$”.
usar ponto e vírgula para dividir document.cookie em um array chamado ca (decodedCookie.split(';')).
percorrer o array ca (i = 0; i < ca.length; i++) e ler cada valor c = ca[i].
se encontrar o cookie (c.indexOf(name) == 0), retornará o valor do cookie (c.substring(name.length, c.length)).
se não encontrar o cookie, retornará "".
função de verificação de cookie
Por fim, criamos uma função para verificar se o cookie foi configurado.
se o cookie já foi configurado, será exibida uma saudação.
se o cookie não foi configurado, será exibida uma caixa de diálogo solicitando o nome do usuário e o nome do usuário será armazenado como cookie por 365 dias, chamando setCookie função:
exemplo
function checkCookie() {
var username = getCookie("username");
if (username != "") {
alert("Bem-vindo novamente " + username);
}
username = prompt("Por favor, insira seu nome:", "");
if (username != "" && username != null) {
setCookie("username", username, 365);
}
}
}
agora combinamos
exemplo
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var 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() {
var user = getCookie("username");
if (user != "") {
alert("Bem-vindo novamente " + user);
}
user = prompt("Por favor, insira seu nome:", "");
if (user != "" && user != null) {
setCookie("username", user, 365);
}
}
}
O exemplo acima será executado após o carregamento da página checkCookie().
- Página Anterior Tempo JS
- Próxima Página Introdução à API Web
