Nenhum produto encontrado nessa seleção.
Cookies em Javascript são uma ótima maneira de salvar dados (trechos de texto) no lado do cliente passando uma data para sua expiração, isto é, você pode salvar praticamente qualquer coisa no computador do usuário do seu site e acessar esses dados posteriormente para qualquer ação. Mesmo que o usuário feche o navegador e desligue seu computador. No próximo acesso ao seu site, o cookie vai estar lá (a menos que ele tenha apagado os cookies do navegador).
Na verdade, os cookies não são uma parte do Javascript, mas sim, trechos de dados baseados em informações fornecidas pelo servidor e o navegador, que permitem que um desenvolvedor possa utilizar e manipular os dados da maneira que preferir.
Sua função principal é a de manter a persistência de sessões HTTP, onde você pode criar uma data futura para sua expiração, ou simplesmente esperar que o usuário feche o navegador para que a sessão "morra".
Basicamente, se você criar um cookie sem enviar uma data específica para sua expiração, assim que o navegador for fechado, o cookie será automaticamente apagado. Porém, se você enviar uma data no formato GMT, ele só será apagado quando chegar a data especificada.
Outra coisa que você pode fazer e que é bastante útil, é configurar um caminho (path) para seu cookie, assim, seu cookie poderá estar disponível em apenas um subdomínio do seu site e não no site como um todo (você já vai entender).
Os cookies são baseados no domínio e no navegador que os cria, por exemplo, se você criar um cookie utilizando o Firefox, este mesmo cookie não estará disponível no Internet Explorer. Além disso, se você criar um cookie para o domínio exemplo.com, este mesmo cookie não estará disponível para outroexemplo.com. Você não pode criar, nem acessar cookies de outros sites, nem os outros sites podem acessar seus cookies.
Neste artigo, vou explicar como criar, alterar, apagar e obter dados de cookies em Javascript, mas se você quiser entender mais sobre o que são, e qual o motivo pelo qual você utilizaria cookies, leia Cookie no Wikipédia.
Criando cookies em Javascript
Em nosso último artigo, falamos sobre o BOM e vários objetos e propriedades que podem ser encontrados dentro dele, porém, não falamos sobre os cookies, que também são uma parte do BOM.
Para criar cookies em Javascript, você utiliza o objeto document seguido da palavra cookie:
document.cookie = 'nome_do_cookie=Valor do meu cookie';
Perceba que criar cookies em Javascript não é a mesma coisa que criar cookies em outras linguagens de programação, como PHP, que lhe da uma função para isso e retorna os cookies em um array. Para criar um cookie em Javascript, você deve enviar seu nome e valor entre aspas como um valor da propriedade cookie do objeto document.
No caso do cookie que criei anteriormente, seu nome será "nome_do_cookie" e seu valor será "Valor do meu cookie". Ele também será expirado assim que o usuário fechar o navegador, pois, não especifiquei uma data específica para sua expiração.
Sabendo disso, você pode enviar a data para expiração do cookie no formato GMT (veja datas em javascript) da seguinte maneira:
// Cria uma nova data no futuro 01/01/2020 var data = new Date(2020,0,01); // Converte a data para GMT // Wed, 01 Jan 2020 02:00:00 GMT data = data.toGMTString(); // Cria o cookie document.cookie = 'nome=João; expires=' + data + ';';
Como você pode ver no código acima, utilizamos um ponto e vírgula e a palavra "expires" com a data GMT que queremos que o cookie expire.
Além de tudo isso, você também pode especificar um caminho (path) para seu cookie. Se você não especificar este caminho, o cookie estará disponível em todo o seu domínio (/).
Para estabelecer um caminho, utilize a palavra path.
// Cria uma nova data no futuro 01/01/2020 var data = new Date(2020,0,01); // Converte a data para GMT // Wed, 01 Jan 2020 02:00:00 GMT data = data.toGMTString(); // Cria o cookie document.cookie = 'nome=João; expires=' + data + '; path=/';
Com isso, você pode criar quantos cookies quiser, veja um exemplo:
// Cria uma nova data no futuro 01/01/2020 var data = new Date(2020,0,01); // Converte a data para GMT // Wed, 01 Jan 2020 02:00:00 GMT data = data.toGMTString(); // Cria o cookie document.cookie = 'nome=João; expires=' + data + '; path=/'; document.cookie = 'sobrenome=Miranda Figueiredo; expires=' + data + '; path=/'; document.cookie = 'apelido=Joãozinho; expires=' + data + '; path=/';
Alterando cookies em Javascript
Para alterar cookies em Javascript, basta utilizar a mesma função com o mesmo nome de cookie, assim você estará alterando seu valor:
// Cria uma nova data no futuro 01/01/2020 var data = new Date(2020,0,01); // Converte a data para GMT // Wed, 01 Jan 2020 02:00:00 GMT data = data.toGMTString(); // Cria o cookie document.cookie = 'nome=O nome não é mais joão; expires=' + data + '; path=/'; document.cookie = 'sobrenome=Miranda Figueiredo; expires=' + data + '; path=/'; document.cookie = 'apelido=Joãozinho; expires=' + data + '; path=/';
Agora o nome não é mais João, mas "O nome não é mais joão".
Apagando cookies em Javascript
Caso queira apagar um cookie, basta colocar um valor em branco para o mesmo, e alterar sua data para o passado:
// Data no passado var data = new Date(2010,0,01); // Converte a data para GMT data = data.toGMTString(); // Apaga o cookie document.cookie = 'nome=; expires=' + data + '; path=/'; document.cookie = 'sobrenome=; expires=' + data + '; path=/'; document.cookie = 'apelido=; expires=' + data + '; path=/';
Agora todos os cookies criados foram apagados e no próximo acesso ao seu código eles não estarão mais disponíveis.
Acessando valores de cookies em Javascript
Agora vem a parte chata, acessar os valores dos cookies em Javascript não é nada fácil para iniciantes. Isso porque eles são salvos em uma única string da seguinte maneira:
nome=João; sobrenome=Miranda Figueiredo; apelido=Joãozinho
Para acessar os dados de um único cookie, você tem que fazer alguns malabarismos que vou passar para você ao final desse artigo. Primeiro, porém, veja como é simples passar todos os cookies para uma variável:
// todos_os_cookies tem todos os cookies do documento var todos_os_cookies = document.cookie; // Veja que beleza dos dados separados por ponto e vírgula alert(todos_os_cookies);
Depois que você jogou os dados de todos os cookies em uma variável, é só utilizar algumas funções para acessar o valor de um deles.
Funções para manipular cookies em Javascript
Ao invés de ficar explicando e fazendo as coisas complicadas para você, vou passar três funções para você.
A primeira cria os cookies:
// Cria um novo cookie
// Parâmetro 1 é o nome do cookie
// Parâmetro 2 é o valor do cookie
function cria_cookie(nome, valor) {
// Cria uma data 01/01/2020
var data = new Date(2020,0,01);
// Converte a data para GMT
data = data.toGMTString();
// Codifica o valor do cookie para evitar problemas
valor = encodeURI(valor);
// Cria o novo cookie
document.cookie = nome + '=' + valor + '; expires=' + data + '; path=/';
}Para criar ou alterar qualquer cookie, simplesmente envie o seu nome e valor:
// Cria cookie
cria_cookie('nome', 'João Miranda');
cria_cookie('apelido', 'Joãozinho');
// Altera o cookie nome
cria_cookie('nome', 'Luiz Otávio Miranda');A segunda função serve para apagar um cookie qualquer:
// Apaga o cookie
// Envie o nome do cookie como parâmetro
function apaga_cookie(nome){
// Cria uma data no passado 01/01/2010
var data = new Date(2010,0,01);
// Converte a data para GMT
data = data.toGMTString();
// Tenta modificar o valor do cookie para a data expirada
// Assim ele será apagado
document.cookie = nome + '=; expires=' + data + '; path=/';
}Para utilizar essa função, simplesmente envie o nome do cookie que deseja apagar:
// Apaga cookie
apaga_cookie('nome');
apaga_cookie('apelido');E a terceira, e mais legal, retorna o valor de um cookie qualquer:
// Obtém o valor de um cookie
// Envie o nome do cookie como parâmetro
function valor_cookie(nome_cookie) {
// Adiciona o sinal de = na frente do nome do cookie
var cname = ' ' + nome_cookie + '=';
// Obtém todos os cookies do documento
var cookies = document.cookie;
// Verifica se seu cookie existe
if (cookies.indexOf(cname) == -1) {
return false;
}
// Remove a parte que não interessa dos cookies
cookies = cookies.substr(cookies.indexOf(cname), cookies.length);
// Obtém o valor do cookie até o ;
if (cookies.indexOf(';') != -1) {
cookies = cookies.substr(0, cookies.indexOf(';'));
}
// Remove o nome do cookie e o sinal de =
cookies = cookies.split('=')[1];
// Retorna apenas o valor do cookie
return decodeURI(cookies);
}
Para utilizar a função acima, crie uma variável e envie o nome do cookie que deseja:
// Cria cookie
cria_cookie('nome', 'João Miranda');
cria_cookie('apelido', 'Joãozinho');
// Aqui obtemos o valor do cookie nome
var nome = valor_cookie('nome');
// Aqui apelido
var apelido = valor_cookie('apelido');
// Joãozinho Miranda
alert(nome);
// Joãozinho
alert(apelido); Todas as funções
Se você se perdeu no código, veja todas as funções abaixo:
// Cria um novo cookie
// Parâmetro 1 é o nome do cookie
// Parâmetro 2 é o valor do cookie
function cria_cookie(nome, valor) {
// Cria uma data 01/01/2020
var data = new Date(2020,0,01);
// Converte a data para GMT
data = data.toGMTString();
// Codifica o valor do cookie para evitar problemas
valor = encodeURI(valor);
// Cria o novo cookie
document.cookie = nome + '=' + valor + '; expires=' + data + '; path=/';
}
// Apaga o cookie
// Envie o nome do cookie como parâmetro
function apaga_cookie(nome){
// Cria uma data no passado 01/01/2010
var data = new Date(2010,0,01);
// Converte a data para GMT
data = data.toGMTString();
// Tenta modificar o valor do cookie para a data expirada
// Assim ele será apagado
document.cookie = nome + '=; expires=' + data + '; path=/';
}
// Obtém o valor de um cookie
// Envie o nome do cookie como parâmetro
function valor_cookie(nome_cookie) {
// Adiciona o sinal de = na frente do nome do cookie
var cname = ' ' + nome_cookie + '=';
// Obtém todos os cookies do documento
var cookies = document.cookie;
// Verifica se seu cookie existe
if (cookies.indexOf(cname) == -1) {
return false;
}
// Remove a parte que não interessa dos cookies
cookies = cookies.substr(cookies.indexOf(cname), cookies.length);
// Obtém o valor do cookie até o ;
if (cookies.indexOf(';') != -1) {
cookies = cookies.substr(0, cookies.indexOf(';'));
}
// Remove o nome do cookie e o sinal de =
cookies = cookies.split('=')[1];
// Retorna apenas o valor do cookie
return decodeURI(cookies);
}Pronto!
Qualquer dúvida é só falar, e se encontrar algum erro, por favor, escreva um comentário detalhando.
Outras aulas
Caso tenha perdido a aula anterior, segue o link:
Próxima aula:
Caso queira visualizar todas as aulas dessa sessão em ordem cronológica invertida:
