Como ler cookie pelo nome com JavaScript

Neste artigo você vai aprender a como ler cookie pelo nome com JavaScript, vamos utilizar uma estratégia muito simples e eficaz!

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

A importância dos cookies e como ler um pelo nome com JavaScript

Os cookies são um aspecto essencial da web moderna.

Eles permitem que os sites lembrem-se dos usuários, tornando a experiência online mais personalizada e conveniente.

Neste artigo, vamos aprender a ler cookie pelo nome com JavaScript, uma habilidade útil para qualquer desenvolvedor web.

O que é um cookie?

Um cookie é um pequeno arquivo de texto que um site salva no computador ou dispositivo móvel do usuário quando ele visita o site.

Cada cookie é único para o navegador da web do usuário.

Ele contém informações anônimas, geralmente um identificador único e informações do site.

Isso permite que um site se lembre de coisas como as preferências do usuário ou o que ele colocou em seu carrinho de compras.

Como os cookies são usados

Os cookies têm várias funções. Eles podem ser usados para rastrear o comportamento do usuário, lembrar preferências do usuário, permitir que os usuários façam login em sites, entre outras funcionalidades.

Por exemplo, quando você faz login em um site, um cookie é criado. Esse cookie permite que o site saiba que você está logado cada vez que você visita uma nova página no site.

Como os cookies são criados

Os cookies são criados usando a propriedade document.cookie do JavaScript. Você pode criar um novo cookie atribuindo uma string a document.cookie que contém o nome e o valor do cookie, separados por um sinal de igual (=). Aqui está um exemplo:

document.cookie = "username=John Doe";

Como ler um cookie pelo nome com JavaScript

Agora que entendemos o que é um cookie e como ele é criado, podemos discutir como ler um cookie pelo nome com JavaScript.

Para fazer isso, vamos usar a propriedade document.cookie novamente.

Quando acessamos document.cookie, obtemos uma string que contém todos os cookies que estão atualmente armazenados.

Cada cookie é separado por um ponto e vírgula e um espaço (; ). Aqui está um exemplo de como isso pode parecer:

console.log(document.cookie);
// "username=John Doe; theme=light"

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

Para ler um cookie pelo nome, precisamos dividir essa string em uma matriz de cookies individuais e, em seguida, verificar cada cookie para ver se ele contém o nome que estamos procurando.

Aqui está como você pode fazer isso:

function getCookie(name) {
    let cookies = document.cookie.split("; ");

    for (let i = 0; i < cookies.length; i++) {
        let cookie = cookies[i];
        let [cookieName, cookieValue] = cookie.split("=");

        if (cookieName === name) {
            return cookieValue;
        }
    }

    return null;
}

console.log(getCookie("username")); // "John Doe"

Neste código, a função getCookie aceita um nome de cookie como argumento.

Ele divide document.cookie em uma matriz de cookies individuais e, em seguida, itera sobre essa matriz.

Para cada cookie, ele divide o cookie em um nome e um valor.

Se o nome do cookie corresponder ao nome que estamos procurando, ele retorna o valor do cookie.

Se nenhum cookie com esse nome for encontrado, ele retorna null.

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

Os cookies são uma parte importante da web moderna, permitindo que os sites lembrem-se dos usuários e forneçam uma experiência mais personalizada.

Saber como ler um cookie pelo nome com JavaScript é uma habilidade valiosa que todo desenvolvedor web deve ter em seu arsenal.

Além disso, é importante ressaltar que, embora os cookies sejam extremamente úteis, eles também levantam questões de privacidade.

Sempre use cookies de maneira responsável, respeitando as preferências e a privacidade dos usuários.

Certifique-se de seguir as diretrizes e leis de privacidade em seu país ou região ao trabalhar com cookies.

Outro ponto a ser levado em consideração é a segurança.

Cookies, especialmente aqueles que contêm informações sensíveis, devem ser protegidos para evitar vazamentos de dados.

Isso pode ser feito usando o atributo Secure para garantir que os cookies sejam enviados apenas sobre conexões HTTPS e o atributo HttpOnly para evitar que os cookies sejam acessados por meio de JavaScript.

Isso ajuda a proteger os cookies contra ataques de cross-site scripting (XSS).

Em resumo, os cookies são uma ferramenta poderosa para melhorar a experiência do usuário na web.

Ao entender como criar, ler e manipular cookies com JavaScript, você pode criar sites mais dinâmicos e interativos.

Entretanto, sempre tenha em mente as implicações de privacidade e segurança ao trabalhar com cookies.

Agora que você aprendeu a ler cookie pelo nome com JavaScript, eu encorajo você a explorar mais sobre o assunto.

Pratique a criação e manipulação de cookies, experimente diferentes atributos de cookies e veja como eles podem afetar a experiência do usuário em seu site.

Lembre-se, a melhor maneira de aprender é fazendo. Boa sorte e divirta-se codificando!

Está buscando em evoluir como Programador? Confira o nossos cursos clicando aqui.

Nosso principal objetivo é tornar você um dev profissional que é capaz de resolver problemas de alta dificuldade e criar projetos complexos, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.

Cursos com vários projetos, exercícios, material apoio, comunidade de alunos e muito mais!

Cuidado: valor com sinal de igual quebra a leitura

Se liga nisso, porque é a pegadinha mais comum aqui

Aí um cookie que guarda token, id em base64 ou qualquer valor que termine em = volta cortado pela metade, e tu fica meia hora achando que o problema é o navegador (já me ferrei uma vez por causa disso)

A correção é simples: corta só no PRIMEIRO igual

function getCookie(name) {
const cookies = document.cookie.split("; ");

for (const cookie of cookies) {
const separador = cookie.indexOf("=");
const cookieName = cookie.slice(0, separador);
const cookieValue = cookie.slice(separador + 1);

if (cookieName === name) {
return decodeURIComponent(cookieValue);
}
}

return null;
}

Repara que apareceu o decodeURIComponent também

Regra de bolso: escreveu com encodeURIComponent, lê com decodeURIComponent 🙂

Versão curta e como pegar TODOS os cookies de uma vez

A versão com for é ótima pra entender o que acontece por baixo

Mas no dia a dia dá pra deixar bem mais enxuto com find

function getCookie(name) {
const alvo = document.cookie
.split("; ")
.find((item) => item.startsWith(name + "="));

return alvo ? decodeURIComponent(alvo.slice(name.length + 1)) : null;
}

E se tu precisa acessar todos os cookies pelo JavaScript, sem ficar chamando a função nome por nome, monta um objeto de uma vez só

function getAllCookies() {
if (!document.cookie) return {};

return document.cookie.split("; ").reduce((acc, item) => {
const separador = item.indexOf("=");
const chave = decodeURIComponent(item.slice(0, separador));
return acc;
}, {});
}

console.log(getAllCookies());
// { username: "John Doe", theme: "light" }

Aquele if (!document.cookie) return {} não é frescura

Sem ele, quando não existe nenhum cookie, o split devolve um array com uma string vazia dentro e tu acaba criando uma chave fantasma no objeto

Com o objeto pronto, ler vira só cookies.theme, bem mais confortável quando tu precisa de vários de uma vez

Li o cookie e voltou null, e agora?

Antes de sair mexendo na função, faz o teste mais honesto que existe

console.log(document.cookie);

Essa linha mostra exatamente o que o JavaScript CONSEGUE enxergar naquela página

Se o nome que tu procura não aparece aí, o problema não está no seu código de leitura, beleza?

Os suspeitos de sempre:

1. O cookie foi criado com o atributo HttpOnly, e esse é feito justamente pra o JavaScript não alcançar (é proteção, não bug)
2. O cookie pertence a outro domínio ou a outro path, então ele nem entra no document.cookie dessa página
3. Tu está lendo antes de existir, tipo ler no topo do arquivo e só criar o cookie depois no fluxo
4. O valor foi gravado sem codificar e tem ; no meio, aí o navegador entende como o fim daquele cookie

Tome cuidado principalmente com o primeiro caso

Não existe gambiarra de JavaScript que leia um cookie HttpOnly, e isso é bom: quem precisa desse valor é o servidor, não o front

E quando dá ‘document is not defined’?

Esse aqui é o cenário que ficou muito mais comum depois que o post original foi escrito

Hoje boa parte dos projetos renderiza uma parte no servidor antes de chegar no navegador

E no servidor não existe document, porque document é coisa do navegador

Aí o erro clássico aparece:

ReferenceError: document is not defined

O caminho é separar os dois mundos:

No cliente, chame o getCookie só depois que o componente montou, ou dentro de um evento (clique, envio de formulário), nunca solto no topo do arquivo que também roda no servidor

No servidor, o cookie chega junto da requisição, dentro do cabeçalho Cookie, então é de lá que tu lê, e não do document

Uma guarda simples já evita o tombo:

function getCookieSeguro(name) {
if (typeof document === "undefined") return null;
return getCookie(name);
}

Simples, mas salva o build de quebrar sem motivo 😀

Como apagar um cookie pelo nome:

Já que tu aprendeu a criar e a ler, falta o outro lado da moeda

Não existe um deleteCookie nativo

O jeito é sobrescrever o cookie com um tempo de vida zerado, que é a forma de dizer pro navegador ‘pode descartar esse aqui’

document.cookie = "username=; max-age=0; path=/";

Detalhe que derruba muita gente: o path (e o domínio, quando foi usado) precisa ser o MESMO de quando o cookie foi criado

Se tu criou em / e tenta apagar de /perfil, o navegador entende como outro cookie e o antigo continua lá, vivinho

Faça o teste: apaga e roda console.log(document.cookie) logo em seguida pra confirmar que sumiu

Cuidado: valor com sinal de igual quebra a leitura

Se liga nisso, porque é a pegadinha mais comum aqui

Aí um cookie que guarda token, id em base64 ou qualquer valor que termine em = volta cortado pela metade, e tu fica meia hora achando que o problema é o navegador (já me ferrei uma vez por causa disso)

A correção é simples: corta só no PRIMEIRO igual

function getCookie(name) {
const cookies = document.cookie.split("; ");

for (const cookie of cookies) {
const separador = cookie.indexOf("=");
const cookieName = cookie.slice(0, separador);
const cookieValue = cookie.slice(separador + 1);

if (cookieName === name) {
return decodeURIComponent(cookieValue);
}
}

return null;
}

Repara que apareceu o decodeURIComponent também

Regra de bolso: escreveu com encodeURIComponent, lê com decodeURIComponent 🙂

Versão curta e como pegar TODOS os cookies de uma vez

A versão com for é ótima pra entender o que acontece por baixo

Mas no dia a dia dá pra deixar bem mais enxuto com find

function getCookie(name) {
const alvo = document.cookie
.split("; ")
.find((item) => item.startsWith(name + "="));

return alvo ? decodeURIComponent(alvo.slice(name.length + 1)) : null;
}

E se tu precisa acessar todos os cookies pelo JavaScript, sem ficar chamando a função nome por nome, monta um objeto de uma vez só

function getAllCookies() {
if (!document.cookie) return {};

return document.cookie.split("; ").reduce((acc, item) => {
const separador = item.indexOf("=");
const chave = decodeURIComponent(item.slice(0, separador));
return acc;
}, {});
}

console.log(getAllCookies());
// { username: "John Doe", theme: "light" }

Aquele if (!document.cookie) return {} não é frescura

Sem ele, quando não existe nenhum cookie, o split devolve um array com uma string vazia dentro e tu acaba criando uma chave fantasma no objeto

Com o objeto pronto, ler vira só cookies.theme, bem mais confortável quando tu precisa de vários de uma vez

Li o cookie e voltou null, e agora?

Antes de sair mexendo na função, faz o teste mais honesto que existe

console.log(document.cookie);

Essa linha mostra exatamente o que o JavaScript CONSEGUE enxergar naquela página

Se o nome que tu procura não aparece aí, o problema não está no seu código de leitura, beleza?

Os suspeitos de sempre:

1. O cookie foi criado com o atributo HttpOnly, e esse é feito justamente pra o JavaScript não alcançar (é proteção, não bug)
2. O cookie pertence a outro domínio ou a outro path, então ele nem entra no document.cookie dessa página
3. Tu está lendo antes de existir, tipo ler no topo do arquivo e só criar o cookie depois no fluxo
4. O valor foi gravado sem codificar e tem ; no meio, aí o navegador entende como o fim daquele cookie

Tome cuidado principalmente com o primeiro caso

Não existe gambiarra de JavaScript que leia um cookie HttpOnly, e isso é bom: quem precisa desse valor é o servidor, não o front

E quando dá ‘document is not defined’?

Esse aqui é o cenário que ficou muito mais comum depois que o post original foi escrito

Hoje boa parte dos projetos renderiza uma parte no servidor antes de chegar no navegador

E no servidor não existe document, porque document é coisa do navegador

Aí o erro clássico aparece:

ReferenceError: document is not defined

O caminho é separar os dois mundos:

No cliente, chame o getCookie só depois que o componente montou, ou dentro de um evento (clique, envio de formulário), nunca solto no topo do arquivo que também roda no servidor

No servidor, o cookie chega junto da requisição, dentro do cabeçalho Cookie, então é de lá que tu lê, e não do document

Uma guarda simples já evita o tombo:

function getCookieSeguro(name) {
if (typeof document === "undefined") return null;
return getCookie(name);
}

Simples, mas salva o build de quebrar sem motivo 😀

Como apagar um cookie pelo nome:

Já que tu aprendeu a criar e a ler, falta o outro lado da moeda

Não existe um deleteCookie nativo

O jeito é sobrescrever o cookie com um tempo de vida zerado, que é a forma de dizer pro navegador ‘pode descartar esse aqui’

document.cookie = "username=; max-age=0; path=/";

Detalhe que derruba muita gente: o path (e o domínio, quando foi usado) precisa ser o MESMO de quando o cookie foi criado

Se tu criou em / e tenta apagar de /perfil, o navegador entende como outro cookie e o antigo continua lá, vivinho

Faça o teste: apaga e roda console.log(document.cookie) logo em seguida pra confirmar que sumiu