Como usar cookies com JavaScript?

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";

document.cookie="username=Mário Valney; expires=Thu, 13 Mai 2014 12:00:00 GMT";

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:

Fonte: Vida de Programador