Como definir, verificar e ler um valor de cookie com javascript?

Cookies são pequenos arquivos de texto que mantêm um pouco de dados no computador do usuário (em torno de 4 KB) e são usados ​​para armazenar informações sobre um usuário, por exemplo, as preferências de um usuário para um site que o site pode recuperar para personalizar a página da web quando O usuário visita o site novamente. Para simplificar, os cookies ajudam em uma visita de site mais conveniente e pessoal para os usuários. Um cookie é enviado ao seu computador por um site quando você o visita e é salvo em um arquivo no seu computador que é acessível através do seu navegador da web.

Falaremos sobre como definir, verificar e ler um valor de cookie com javascript neste artigo. No entanto, antes de prosseguir, deixe -me enfatizar o ponto em que os cookies não devem ser usados ​​para armazenar informações críticas/sensíveis, como senhas ou detalhes do seu cartão de crédito, pois indivíduos maliciosos podem acessá -los.

Criando um biscoito

O documento.biscoito A propriedade cria, lê e exclui cookies e esta é a propriedade, que representa todos os cookies conectados a um documento. Para criar um cookie primeiro, devemos saber que os cookies são salvos em pares de nome-valor, por exemplo:

nome de usuário = Obama;

Vamos agora criar um cookie em JavaScript:

documento.Cookie = "Nome de usuário = Obama";

A vida útil de um cookie está definida para a duração da sessão atual do navegador, o que significa que expira quando o usuário fecha o navegador. Para resolver esse problema, usamos o MAX-AGE atributo que garante que o cookie persista além da sessão atual do navegador. No atributo Max-Age, podemos especificar a vida útil de um cookie em segundos i-e quanto tempo o cookie permanecerá antes de ser excluído. A vida útil do cookie no código abaixo é de 30 dias:

documento.Cookie = "Nome de usuário = Obama; Max-Arane =" + 30*24*60*60;

Também podemos usar o expirar atributo que leva a data exata em vez de segundos no formato GMT/UTC e nessa data o cookie expira:

documento.Cookie = "Nome de usuário = Obama; expira = qui, 26 de setembro de 2021 12:00:00 UTC";

Outro atributo que podemos usar na criação de biscoitos é o caminho atributo que informa ao navegador a que caminho o cookie pertence, em vez do caminho padrão, que é a página atual.

documento.Cookie = "Nome de usuário = Obama; expira = qui, 26 de setembro de 2021 12:00:00 UTC; PATH =/";

Temos que usar o javascript codeuricomponent () Como o valor do cookie contém vírgulas, semicolons e espaços e o codeuricomponenet () garante que a corda não contenha vírgulas, semicolons e espaços, pois não são permitidos em cookies.

documento.Cookie = "nome de usuário =" + Encodeuricomponent ("Obama");

Lendo cookie

Podemos ler ou obter todos os cookies de um domínio atual usando o documento.biscoito:

var x = documento.biscoito;

Assim como na criação de um biscoito que usamos codeuricomponent () Ao ler um biscoito que temos que usar decodeuricomponenet ():

documento.Cookie = "nome de usuário =" + decodeuricomponent ("Obama");

Excluindo biscoito

Também podemos excluir um cookie e, em JavaScript, o processo é muito simples, pois não precisamos especificar algum valor de cookie, em vez de usar o parâmetro Expire e atualizá -lo usando uma data passada, por exemplo:

documento.Cookie = "Nome de usuário = Obama; expira = qui, 20 de novembro de 2018 12:00:00 UTC; PATH =/";

Excluindo biscoito

Também podemos excluir um cookie e, em JavaScript, o processo é muito simples, pois não precisamos especificar algum valor de cookie, em vez de usar o parâmetro Expire e atualizá -lo usando uma data passada, por exemplo:

documento.Cookie = "Nome de usuário = Obama; expira = qui, 20 de novembro de 2018 12:00:00 UTC; PATH =/";

Exemplo de biscoito em JavaScript

Agora que sabemos o que é um cookie, como criar ou ler um cookie, vamos combinar tudo o que aprendemos e criar um cookie que armazena um nome sempre que um usuário visita nosso site. Vamos pegar um nome de entrada do usuário quando o usuário inserir nosso site pela primeira vez e o armazenará em um cookie. Quando o usuário inserir o site novamente, ele receberá uma mensagem de boas -vindas no site.

Para implementar o exemplo acima, precisaremos de três funções nas quais uma das funções definirá um cookie, um lerá/obterá um valor de cookie e a última função verificará o valor do cookie.

Defina a função de cookie

função setcookie (nome de usuário, valor, expiração)
const data = new Date ();
data.setTime (data.gettime () + (expiração * 24 * 60 * 60 * 1000));
var expires = "expires ="+data.toutcString ();
documento.Cookie = nome de usuário + "=" + valor + ";" + expira + "; path =/";

Obtenha função de cookie

função getcookie (nome de usuário)
Deixe o nome = nome de usuário + "=";
Deixe Spli = documento.biscoito.dividir(';');
for (var j = 0; j < spli.length; j++)
deixe char = spli [j];
while (char.charat (0) == ")
char = char.substring (1);

if (char.indexOf (nome) == 0)
Retornar char.substring (nome.comprimento, char.comprimento);


retornar "";

Para obter um único cookie, usamos o método dividido que quebrará o nome = pares de valor e depois procurará o nome que queremos.

Verifique a função do cookie

função checkcookie ()
var user = getCookie ("nome de usuário");
// verificando se o usuário é nulo ou não
if (usuário != "")
// Se o usuário não estiver nulo, então alerta
alerta ("Bem -vindo novamente" + usuário);

// Se o usuário for nulo
outro
// Receba a entrada do usuário
usuário = prompt ("Por favor, digite seu nome:", "");
// Defina o cookie
if (usuário != "" && usuário != null)
setcookie ("nome de usuário", usuário, 365);



checkcookie ();

O cookie de verificação simplesmente verifica se o nome existe ou não, se o usuário primeiro visitou nosso site ou não. Ele verifica primeiro chamando o método getCookie () que verifica se o nome de usuário existe ou não e se ele existe exibe o mensagem de boas-vindas com o nome do usuário. Se o nome de usuário não existir, ele chama o método setCookie () e o usuário insere o nome e o cookie está definido.

Abaixo estão as capturas de tela de quando visitei o site pela primeira vez:

Abaixo está a captura de tela mostrando o nome que eu defini após a atualização da página:

Conclusão

Um cookie é um pequeno arquivo de texto que consiste em algumas informações sobre um usuário e é um pacote de dados que um computador recebe e depois envia de volta sem alterá -lo ou alterá -lo. Os cookies do navegador ajudam a acompanhar as visitas ao usuário e as atividades do usuário. Por exemplo, você adicionou alguns itens ao seu carrinho e está explorando o site e foi para outra página ou acidentalmente a atualize, sem biscoitos que seu carrinho ficaria vazio. Analisamos como definir, verificar e ler cookies em javascript com exemplos neste post.