MENU It's me: Mário!

Vai um Cookie com JavaScript?

Como usar cookies com JavaScript?

Front! 12 de maio de 2014 12 comentários
Front!
  • 12 - 05 - 14
  •        
  • 12

O título desse post é meio estranho se você já trabalha com cookies no back-end ou então se nunca usou em canto nenhum. Mas mesmo assim, tenho certeza que em algum momento você já fez uso dos “biscoitos” =D

 

O que Cookies?

O cookie (biscoito em inglês) é um grupo de dados trocados entre o navegador e o servidor, guardado em um arquivo de texto criado no seu computador. A sua função principal é a de manter a persistência de sessões (e dados) durante a navegação. Ou seja, é uma forma de guardar dados ao fechar/mudar de página. Assim é possível manter sessões, por exemplo.

É por isso que você não faz o login sempre que abre a página do Facebook, Gmail ou de qualquer outro site que armazena sua sessão pelos cookies.

 

Como escrever um Cookie?

Esse será um post rápido, por isso, vou pular direto para a prática, mas antes uma mini-teoria:

Cookies são guardados em pares, então seria algo tipo: username=Mário Valney.

 

document.cookie="username=Mário Valney";

 

E para ler?

Basta chamar escrever var cookir = document.cookie.

document.cookie irá retornar todos os cookies em uma única string como “cookie1=valor1;cookie2=valor2;cookie3=valor3;

 

Utilizando funções para o trabalho

Aqui vão 3 funções extremamente básicas para escrever, ler e apagar um cookie. Elas não incluem os parâmetros com tempo de expiração, caminho, domínio e segurança, que você pode encontrar em, uma das fontes que usei para esse post, a Wikipédia (por mais incrível que pareça… está muito bem escrito lá: meus parabéns para o autor).

function setCookie(name, value, duration) {
        var cookie = name + "=" + escape(value) +
        ((duration) ? "; duration=" + duration.toGMTString() : "");

        document.cookie = cookie;
}
function getCookie(name) {
    var cookies = document.cookie;
    var prefix = name + "=";
    var begin = cookies.indexOf("; " + prefix);

    if (begin == -1) {

        begin = cookies.indexOf(prefix);
        
        if (begin != 0) {
            return null;
        }

    } else {
        begin += 2;
    }

    var end = cookies.indexOf(";", begin);
    
    if (end == -1) {
        end = cookies.length;                        
    }

    return unescape(cookies.substring(begin + prefix.length, end));
}
function deleteCookie(name) {
       if (getCookie(name)) {
              document.cookie = name + "=" +
              "; expires=Thu, 01-Jan-70 00:00:01 GMT";
       }
}

Case

Estou escrevendo esse post, pois precisei usar em um dos sites que estou desenvolvendo no momento.

Basicamente, é uma landing page, na qual o usuário preenche um cadastro e ao enviar a página é recarregada, contudo eu precisava que um dos campos estivesse disponível na próxima etapa. Por isso, cada vez que ele digita no campo e finalmente clica no botão de “enviar”, o cookie é salvo e na próxima página é lido e o valor do campo escrito no novo input. Massa, né?

 

Para finalizar

Sempre que falo de cookies, lembro de um dos piores (e mais legais) trocadilhos que já ouvi/li sobre:

 

 

Seu cookie está com problemas!

 

Fonte: Vida de Programador

Por favor, considere desativar o AdBlock

Não perca nenhuma novidade, assinando nossa newsletter!



Não se preoculpe, não enviaremos muitos e-mails, nem mostraremos seu e-mail para ninguém. Dúvidas?


Deixe seu comentário! Dúvida sobre como comentar
ou vai postar código? Leia antes.

  • Daniel Castro

    Muito bom.

  • Adolfo Augusto Rodrigues

    valeu vetim…

  • Lari Castro

    Opa, pode me dar um help neste caso?

    Estou com um site de uma empresa, e minha tarefa é fazer o translate. Foi solicitado que fosse em javascript e assim foi feito. Dessa forma, quando clico na bandeira, e seleciono o idioma, e a página é traduzida. Porém, quando troco de página, vou para a ala “consumidor” por exemplo, o site não consegue manter o cookie do idioma, e volta para o padrão que é portugues. Poderia me ajudar com este caso?

    Segue meu código em jquery da troca de idiomas:

    var _t = $(‘body’).translate({lang: “pt”, t: t});

    var str = _t.g(“translate”);

    console.log(str);

    $(“.lang_selector”).click(function(ev) {

    var lang = $(this).attr(“data-value”);

    _t.lang(lang);

    console.log(lang);

    ev.preventDefault();

    });

    });

    • Olá Lari, tudo bem?

      Bem complicado fazer isso com javascript, hein… seria tão melhor (principalmente para SEO) que fossem páginas separadas… tenta convencer o povo daí dizendo que o Google não vai pegar a página em outro idioma…

      Mas enfim… sem me meter no seu trabalho =P
      Nesse seu código você não está escrevendo ou lendo o cookie, você precisa fazer como mostrei no artigo tanto para armazenar, quando para ler o valor do idioma. Se você estiver fazendo isso em outro canto, seria legal postar o código completo, aí recomendo o jsfiddle (ou algum do tipo) para que eu possa ler melhor.

      Abraços :D

      ( Dica: joga aquele ev.preventDefault(); pro começo da função do clique… e obrigado por ler o blog e ter criado a conta para comentar aqui :D )

  • Mifrellg Law

    Cara tem como me da uma ajuda?

    A um bom tempo estou buscando uma maneira de fazer um contagem regressiva continuar após atualizar a pagina… me falaram que pra fazer isso eu tinha que usar cookies, o problema é que eu não consigo entender como inserir isso no meu Código de jeito nenhum! Veja o código abaixo com um botão que ativa uma contagem regressiva de 30 segundos e se possível me diga como faço para inserir cookies no código↓ Serei muito grato se me ajudar! :-)

    function conta(b,s) {
    botao = document.getElementById(b);
    contador = document.getElementById(s);
    botao.disabled=true;
    if(contador.innerHTML==0) {
    botao.disabled=false;
    contador.innerHTML = 30;
    return false;
    }
    contador.innerHTML = contador.innerHTML – 1;
    setTimeout(‘conta(“‘+b+'”,”‘+s+'”)’, 1000);
    }

    30

    • Olá, tudo bem?
      No próprio artigo já criei funções para ler e escrever cookies de forma bem rápida. Dá uma olhada nelas, por favor.

      Mas me diz… tem certeza que é necessário usar cookies? Apenas por curiosidade, qual o objetivo em atrelar uma contagem regressiva aos cookies e não ao carregamento da página?

      Abraços.

      • Mifrellg Law

        Tipo.. essa contagem vai ter mais tempo em outros botões. A função é a seguinte→ quando o usuário clicar no botão vai abrir um site e no mesmo tempo começa a contagem regressiva, a contagem marca de quanto em quanto tempo o site vai estar on. É pra algo bem esquisito, mas tudo já deu certo, o único problema é que os usuários estão reclamando que quando atualiza a pagina, a contagem volta tudo de novo. Então basta copiar e colar junto com o script de contagem regressiva? ou tenho que mudar algo?

        • Hum.. realmente não é uma aplicação trivial. haha
          De qualquer forma, basta colocar aquelas funções no teu JS e usá-las dentro do teu código.

          Abraços

          • Mifrellg Law

            Cara obrigado por me responder com educação. :-)

            Só que eu copiei e colei as funçoes dentro do codigo e não deu certo. Eu desisto, vou só colocar um aviso no site falando pra não atualizar a pagina! Mas veja como eu fiz talvez encontre o erro↓

            //Criar um cookie
            function setCookie(name, value, duration) {
            var cookie = name + “=” + escape(value) +
            ((duration) ? “; duration=” + duration.toGMTString() : “”);

            document.cookie = cookie;
            }
            //Ler um cookie
            function getCookie(name) {
            var cookies = document.cookie;
            var prefix = name + “=”;
            var begin = cookies.indexOf(“; ” + prefix);

            if (begin == -1) {

            begin = cookies.indexOf(prefix);

            if (begin != 0) {
            return null;
            }

            } else {
            begin += 2;
            }

            var end = cookies.indexOf(“;”, begin);

            if (end == -1) {
            end = cookies.length;
            }

            return unescape(cookies.substring(begin + prefix.length, end));
            }
            //Deletar um cookie

            function deleteCookie(name) {
            if (getCookie(name)) {
            document.cookie = name + “=” +
            “; expires=Thu, 01-Jan-70 00:00:01 GMT”;
            }
            }

            function conta(b,s) {
            botao = document.getElementById(b);
            contador = document.getElementById(s);
            botao.disabled=true;
            if(contador.innerHTML==0) {
            botao.disabled=false;
            contador.innerHTML = 30;
            return false;
            }
            contador.innerHTML = contador.innerHTML – 1;
            setTimeout(‘conta(“‘+b+'”,”‘+s+'”)’, 1000);
            }

            30

            • Mifrella, posso te pedir pra dar uma lida nesse link e editar seus comentários?
              Lá tem explicando como postar código nos comentários o que pode facilitar a leitura para os próximos usuários, além de me ajudar a entender o seu código.
              Ou então, recorta e cola no pastebin ou semelhante?

              Obrigado!!!

              • Mifrellg Law

                Pronto editei! :-)