Cookies permitem armazenar 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, no seu computador.
Quando um servidor web enviou uma página web para um navegador, a conexão é encerrada, eo servidor esquece tudo sobre o usuário.
Cookies foram inventadas para resolver o problema "como se lembrar de informações sobre o usuário":
- Quando um usuário visita uma página web, o seu nome pode ser armazenado em um cookie .
- Próxima vez que o usuário visita a página, o cookie "lembra" o seu nome.
Os cookies são guardados em pares nome-valor como:
username = John Doe
Quando uma solicitação do navegador uma página web a partir de um servidor, cookies pertencentes à página é adicionada ao pedido. Desta forma, o servidor recebe os dados necessários para "lembrar" informações sobre os usuários.
Criar a Cookie com JavaScript
JavaScript pode criar, ler e apagar cookies com o document.cookie propriedade.
Com JavaScript, a cookie pode ser criado assim:
document.cookie = "username=John Doe";Você também pode adicionar uma data de expiração (em tempo UTC). Por padrão, the cookie é apagado 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 dizer ao navegador que caminho the cookie pertence. Por padrão, the cookie pertence à página atual.
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";Leia a Cookie com JavaScript
Com JavaScript, cookies podem ser lidos assim:
var x = document.cookie;document.cookie retornará todos os cookies em uma cadeia muito parecido: cookie1=value; cookie2=value; cookie3=value; cookie1=value; cookie2=value; cookie3=value;
Alterar a Cookie com JavaScript
Com JavaScript, você pode alterar a cookie do mesmo modo que você criá-lo:
document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
O velho cookie é substituído.
Excluir a Cookie com JavaScript
Excluindo a cookie é muito simples. Basta definir o parâmetro expira para uma data passada:
document.cookie = "username=; expires=Thu, 01
Jan 1970 00:00:00 UTC";
Note que você não tem que especificar a cookie valor quando você excluir a cookie .
O Cookie de Cordas
O document.cookie propriedade se parece com uma cadeia de texto normal. Mas não é.
Mesmo se você escrever um todo cookie corda para document.cookie , quando você lê-lo novamente, você só pode ver o par nome-valor do mesmo.
Se você definir um novo cookie , mais velhos cookies não são substituídos. O novo cookie é adicionado à document.cookie , então se você ler document.cookie mais você vai obter algo como:
cookie1 = value; cookie2 = value;
Se você quiser encontrar o valor de um especificado cookie , você deve escrever uma função JavaScript que procura o cookie valor no cookie string.
JavaScript Cookie Exemplo
No exemplo a seguir, vamos criar a cookie que armazena o nome de um visitante.
A primeira vez que um visitante chega à página web, ele será convidado a preencher o seu nome. O nome é então armazenado em a cookie .
A próxima vez que o visitante chega à mesma página, ele receberá uma mensagem de boas-vindas.
Para o exemplo, vamos criar 3 funções de JavaScript:
- Uma função para definir um cookie valor
- Uma função para obter um cookie valor
- Uma função para verificar um cookie valor
Uma função para definir a Cookie
Primeiro, criamos uma função que armazena o nome do visitante em a cookie variável:
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;
}
Exemplo explicou:
Os parâmetros da função acima são o nome do cookie (cname) , o valor do the cookie (cvalue) , eo número de dias até que o cookie deve expirar (exdays).
A função define a cookie somando o cookiename , the cookie de valor, ea cadeia de expirar.
Uma função para obter a Cookie
Então, criamos uma função que retorna o valor de um determinado cookie :
Exemplo
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 "";
}
Função explicou:
Tome the cookiename como parâmetro (cname).
Criar uma variável (nome) com o texto a ser pesquisado (cname + "=").
Dividir document.cookie em ponto e vírgula em uma matriz chamada ca (ca = document.cookie.split(';')) .
Loop através da ca array (i=0;i<ca.length;i++) , e leu cada valor c=ca[i]) .
Se the cookie é encontrado (c.indexOf(name) == 0) , retornar o valor de the cookie (c.substring(name.length,c.length) .
Se the cookie não é encontrado, retorne "".
Uma função para verificar a Cookie
Última, criamos a função que checks se a cookie está definido.
Se the cookie é definido ele irá mostrar uma saudação.
Se the cookie não está definido, ele irá mostrar uma caixa de alerta, pedindo o nome do utilizador, e armazena o nome de usuário cookie por 365 dias, chamando o setCookie função:
Exemplo
function checkCookie() {
var
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) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue +
"; " + expires;
}
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("Welcome again " + user);
} else {
user = prompt("Please enter your name:", "");
if (user != "" &&
user != null) {
setCookie("username", user, 365);
}
}
} Tente você mesmo " O exemplo acima corre o checkCookie() função quando a página é carregada.