Como criar cookies com JavaScript

Neste artigo você vai aprender a como criar cookies com JavaScript, e também ler e identificar valores salvos em cookies!

Fala programador(a), beleza? Bora aprender mais sobre cookies e também sobre a linguagem JavaScript!

Para criar um cookie é muito simples, vamos utilizar document.cookie

Na propriedade cookie, vamos atribuir um valor em string que contém o nome e o valor do cookie

Veja um exemplo prático de adição de cookies:

document.cookie = "name=Matheus";
document.cookie = "profissao=Programador";

console.log(document.cookie);

Com as duas primeiras instruções adicionamos dois cookies

Ja no console.log é possível ver todos eles sendo exibidos

E agora como vamos utilizar estes valores?

Como você pode observar, os valores são todos salvos em uma grande string

Para ler eles, é preciso criar um loop que vai identificar qual cookie precisamos utilizar

Vamos precisar seprar em ponto e vírgula (;), pois é assim que os valores são salvos

E também identificar o nome com find, uma função de JS

E por fim, utilizar split para pegar o valor do cookie

Veja um exemplo prático:

const nomeCookie = document.cookie
  .split('; ')
  .find(row => row.startsWith('name='))
  .split('=')[1];
  
console.log(nomeCookie); // Matheus

Primeiramente inicializamos a constante com o valor em string dos cookies, em seguida vamos realizar as operações comentadas anteriormente

• Split para dividir a string no separador ;
• Find para identificar a chave desejada (name)
• E split com 1 para pegar a segunda parte do array criado, que é o valor (Matheus)

Desta forma conseguimos salvar e resgatar valores em cookies com JavaScript puro!

Conclusão

Neste artigo você aprendeu a criar cookies com JavaScript

Document.cookie faz toda a mágica, salva os valores separados em ponto e vírgula

Depois podemos utilizar o snippet que criamos para resgatar os valores pelo nome da chave salvo

Assim foi possível salvar e ler valores de cookies com JS!

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!