Como definir / desmarcar um cookie com jQuery?

1244

Como definir e desmarcar um cookie usando jQuery, por exemplo, crie um cookie nomeado teste defina o valor como 1?

AMD
fonte

Respostas:

1767

Atualização em abril de 2019

O jQuery não é necessário para leitura / manipulação de cookies, portanto, não use a resposta original abaixo.

Acesse https://github.com/js-cookie/js-cookie e use a biblioteca que não depende do jQuery.

Exemplos básicos:

// Set a cookie
Cookies.set('name', 'value');

// Read the cookie
Cookies.get('name') => // => 'value'

Veja os documentos no github para detalhes.


Veja o plugin:

https://github.com/carhartl/jquery-cookie

Você pode então fazer:

$.cookie("test", 1);

Deletar:

$.removeCookie("test");

Além disso, para definir um tempo limite de um determinado número de dias (10 aqui) no cookie:

$.cookie("test", 1, { expires : 10 });

Se a opção expirar for omitida, o cookie se tornará um cookie de sessão e será excluído quando o navegador sair.

Para cobrir todas as opções:

$.cookie("test", 1, {
   expires : 10,           // Expires in 10 days

   path    : '/',          // The value of the path attribute of the cookie
                           // (Default: path of page that created the cookie).

   domain  : 'jquery.com', // The value of the domain attribute of the cookie
                           // (Default: domain of page that created the cookie).

   secure  : true          // If set to true the secure attribute of the cookie
                           // will be set and the cookie transmission will
                           // require a secure protocol (defaults to false).
});

Para ler novamente o valor do cookie:

var cookieValue = $.cookie("test");

Você pode especificar o parâmetro path se o cookie foi criado em um caminho diferente do atual:

var cookieValue = $.cookie("test", { path: '/foo' });

ATUALIZAÇÃO (abril de 2015):

Conforme declarado nos comentários abaixo, a equipe que trabalhou no plug-in original removeu a dependência do jQuery em um novo projeto ( https://github.com/js-cookie/js-cookie ) que possui a mesma funcionalidade e sintaxe geral que a versão do jQuery. Aparentemente, o plugin original não vai a lugar algum.

Alistair Evans
fonte
1
do changelog: "$ .removeCookie ('foo') para excluir um cookie, usando $ .cookie ('foo', null) agora está obsoleto"
bogdan
68
@ Kazar Passei 6 horas, sem pausas. Finalmente percebi o problema esta manhã. Estou usando isso com phonegap, no site ele funciona sem problemas, mas no dispositivo, quando você tenta recuperar o cookie que possui um JSON, ele já é um objeto, por isso, se você tentar JSON.parse, dará um erro de análise JSON. Resolvido com um "if typeof x == 'string'" faça o JSON.parse; caso contrário, basta usar o objeto. 6 malditas horas olhando para o erro em todos os lugares errados
Andrei Cristian Prodan
10
ao remover o cookie, certifique-se também definir o caminho para o mesmo caminho que você definir o cookie originalmente:$.removeCookie('nameofcookie', { path: '/' });
LessQuesar
30
É 2015 e ainda estamos recebendo mais de 2k hits únicos por semana no repositório jquery-cookie apenas com esta resposta. Podemos aprender algumas coisas com isso: 1. os cookies não vão morrer tão cedo e 2. As pessoas ainda pesquisam no Google por um "plugin jquery para salvar o mundo". O jQuery NÃO é necessário para manipular cookies, o jquery-cookie está sendo renomeado para js-cookie ( github.com/js-cookie/js-cookie ) e a dependência do jquery foi tornada opcional na versão 1.5.0. Haverá uma versão 2.0.0 com muitas coisas interessantes, vale a pena dar uma olhada e contribuir, thx!
Fagner Brack
2
@Kazar Não estamos planejando movê-lo fisicamente, há uma quantidade considerável de tráfego geral para esse URL de várias fontes e Klaus é o proprietário histórico do espaço para nome "jquery-cookie". Não há necessidade de se preocupar com o desaparecimento desse URL tão cedo. Mas ainda assim, eu incentivaria todos a começarem a assistir ao novo repositório em busca de atualizações.
Fagner Brack
429

Não é necessário usar o jQuery particularmente para manipular cookies.

Do QuirksMode (incluindo caracteres de escape)

function createCookie(name, value, days) {
    var expires;

    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toGMTString();
    } else {
        expires = "";
    }
    document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/";
}

function readCookie(name) {
    var nameEQ = encodeURIComponent(name) + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) === ' ')
            c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) === 0)
            return decodeURIComponent(c.substring(nameEQ.length, c.length));
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name, "", -1);
}

Dê uma olhada em

Russ Cam
fonte
2
Oi Russ, a coisa boa sobre bolinho jQuery é que ela escapa os dados
Svetoslav Marinov
2
@lordspace - Basta enrolar o valor em window.escape / unescape para escrever / recuperar o valor do cookie, respectivamente :)
Russ Cam
46
Melhor código de cookie pode ser encontrado aqui: developer.mozilla.org/en/DOM/document.cookie
SDC
3
o cookie plugin jQuery é muito mais simples
brauliobo
1
em vez de fuga ou unescape você pode usar encodeURI ou decodeURI
Rodislav Moldovan
143
<script type="text/javascript">
    function setCookie(key, value, expiry) {
        var expires = new Date();
        expires.setTime(expires.getTime() + (expiry * 24 * 60 * 60 * 1000));
        document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
    }

    function getCookie(key) {
        var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
        return keyValue ? keyValue[2] : null;
    }

    function eraseCookie(key) {
        var keyValue = getCookie(key);
        setCookie(key, keyValue, '-1');
    }

</script>

Você pode definir os cookies como

setCookie('test','1','1'); //(key,value,expiry in days)

Você pode obter os cookies como

getCookie('test');

E, finalmente, você pode apagar os cookies como este

eraseCookie('test');

Espero que ajude alguém :)

EDITAR:

Se você deseja definir o cookie para todo o caminho / página / diretório, defina o atributo path para o cookie

function setCookie(key, value, expiry) {
        var expires = new Date();
        expires.setTime(expires.getTime() + (expiry * 24 * 60 * 60 * 1000));
        document.cookie = key + '=' + value + ';path=/' + ';expires=' + expires.toUTCString();
}

Obrigado vicky

Vignesh Pichamani
fonte
1
60 * 1000 = 60 segundos 60 * (60 * 1000) = 60 minutos, ou seja, 1 hora 24 * (60 * (60 * 1000)) = 1 dia, 24 horas Espero que ajude.
Vignesh Pichamani
1
1 * 24 * 60 * 60 * 1000 da personalização 1 para um dia ou u pode fazer 365
Vignesh Pichamani
1
Boas funções ... Mas por que elas estão dentro de uma tag document.ready?
DSS
1
Isso não funcionará no Safari ou IE para caracteres fora do intervalo ASCII, como é, etc. Além disso, isso não funcionará para alguns caracteres especiais que não são permitidos no nome ou no valor do cookie. Eu recomendo a seguinte referência: tools.ietf.org/html/rfc6265
Fagner Brack
18

Você pode usar um plugin disponível aqui ..

https://plugins.jquery.com/cookie/

e depois escrever um cookie faça $.cookie("test", 1);

para acessar o conjunto de cookies $.cookie("test");

Divyesh Kanzariya
fonte
3
há uma versão mais recente do que plug-in
Andrei Cristian Prodan
13

Aqui está o meu módulo global que eu uso -

var Cookie = {   

   Create: function (name, value, days) {

       var expires = "";

        if (days) {
           var date = new Date();
           date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
           expires = "; expires=" + date.toGMTString();
       }

       document.cookie = name + "=" + value + expires + "; path=/";
   },

   Read: function (name) {

        var nameEQ = name + "=";
        var ca = document.cookie.split(";");

        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == " ") c = c.substring(1, c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
        }

        return null;
    },

    Erase: function (name) {

        Cookie.create(name, "", -1);
    }

};
seanjacob
fonte
10

Certifique-se de não fazer algo assim:

var a = $.cookie("cart").split(",");

Então, se o cookie não existir, o depurador retornará uma mensagem inútil como ".cookie not a function".

Sempre declare primeiro e depois faça a divisão após verificar se há nulo. Como isso:

var a = $.cookie("cart");
if (a != null) {
    var aa = a.split(",");
user890332
fonte
O código de amostra não está completo. É apenas um }que está faltando ou faltam várias linhas de código?
Peter Mortensen
Falta apenas uma letra, mas obviamente você precisará adicionar mais linhas de código para continuar o que deseja fazer com a divisão.
precisa saber é o seguinte
8

Aqui está como você define o cookie com JavaScript:

o código abaixo foi retirado de https://www.w3schools.com/js/js_cookies.asp

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

agora você pode obter o cookie com a função abaixo:

function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

E, finalmente, é assim que você verifica o cookie:

function checkCookie() {
    var username = getCookie("username");
    if (username != "") {
        alert("Welcome again " + username);
    } else {
        username = prompt("Please enter your name:", "");
        if (username != "" && username != null) {
            setCookie("username", username, 365);
        }
    }
}

Se você deseja excluir o cookie, defina o parâmetro expires como uma data passada:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
S1awek
fonte
7

Um exemplo simples de conjunto de cookies no seu navegador:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jquery.cookie Test Suite</title>

        <script src="jquery-1.9.0.min.js"></script>
        <script src="jquery.cookie.js"></script>
        <script src="JSON-js-master/json.js"></script>
        <script src="JSON-js-master/json_parse.js"></script>
        <script>
            $(function() {

               if ($.cookie('cookieStore')) {
                    var data=JSON.parse($.cookie("cookieStore"));
                    $('#name').text(data[0]);
                    $('#address').text(data[1]);
              }

              $('#submit').on('click', function(){

                    var storeData = new Array();
                    storeData[0] = $('#inputName').val();
                    storeData[1] = $('#inputAddress').val();

                    $.cookie("cookieStore", JSON.stringify(storeData));
                    var data=JSON.parse($.cookie("cookieStore"));
                    $('#name').text(data[0]);
                    $('#address').text(data[1]);
              });
            });

       </script>
    </head>
    <body>
            <label for="inputName">Name</label>
            <br /> 
            <input type="text" id="inputName">
            <br />      
            <br /> 
            <label for="inputAddress">Address</label>
            <br /> 
            <input type="text" id="inputAddress">
            <br />      
            <br />   
            <input type="submit" id="submit" value="Submit" />
            <hr>    
            <p id="name"></p>
            <br />      
            <p id="address"></p>
            <br />
            <hr>  
     </body>
</html>

Simples, basta copiar / colar e usar este código para definir seu cookie.

Webpixstudio
fonte
1
Apenas uma observação: o navegador, por padrão, armazena em cache os recursos de acordo com os nomes de arquivos. Neste exemplo, jquery-1.9.0.min.jsserá recarregado para todos quando o nome do arquivo for atualizado jquery-1.9.1.min.js, caso contrário, o navegador NÃO fará uma solicitação ao servidor para verificar o conteúdo atualizado. Se você atualizar o código dentro jquery.cookie.jssem alterar o nome do arquivo, ele NÃO poderá ser recarregado nos navegadores que já armazenaram em cache o jquery.cookie.jsrecurso.
Fagner Brack
Se você estiver escrevendo um site e copiando / colando, lembre-se de que isso não funcionará se você atualizar a jquery.cookie.jsversão sem alterar o nome do arquivo (a menos que o servidor lide com o cache usando E-Tags).
Fagner Brack
if ($ .cookie ('cookieStore')) {var data = JSON.parse ($. cookie ("cookieStore")); // quando carregar página em página diferente não encontrada $ ('# name'). text (data [0]); $ ('# endereço'). texto (dados [1]); }
Mohammad Javad
5

Você pode usar a biblioteca no site da Mozilla aqui

Você poderá definir e obter cookies como este

docCookies.setItem(name, value);
docCookies.getItem(name);
Moustafa Samir
fonte
3

Eu acho que Fresher nos deu um jeito legal, mas há um erro:

    <script type="text/javascript">
        function setCookie(key, value) {
            var expires = new Date();
            expires.setTime(expires.getTime() + (value * 24 * 60 * 60 * 1000));
            document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
        }

        function getCookie(key) {
            var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
            return keyValue ? keyValue[2] : null;
        }
   </script>

Você deve adicionar "valor" próximo a getTime (); caso contrário, o cookie expirará imediatamente :)

barmyman
fonte
2
"value" pode ser uma string. Na pergunta, ele está usando 1 como exemplo. O valor deve ser igual ao da chave, não a duração em dias antes da expiração do cookie. Se o valor fosse passado como "foo", sua versão falharia.
Peter
1

Eu pensei que a resposta de Vignesh Pichamani era a mais simples e mais limpa. Apenas adicionando a ele a capacidade de definir o número de dias antes do vencimento:

EDIT: também adicionada a opção 'nunca expira' se nenhum número de dia estiver definido

        function setCookie(key, value, days) {
            var expires = new Date();
            if (days) {
                expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000));
                document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
            } else {
                document.cookie = key + '=' + value + ';expires=Fri, 30 Dec 9999 23:59:59 GMT;';
            }
        }

        function getCookie(key) {
            var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
            return keyValue ? keyValue[2] : null;
        }

Defina o cookie:

setCookie('myData', 1, 30); // myData=1 for 30 days. 
setCookie('myData', 1); // myData=1 'forever' (until the year 9999) 
mundo livre
fonte
1

Eu sei que existem muitas ótimas respostas. Frequentemente, eu só preciso ler cookies e não quero criar sobrecarga carregando bibliotecas adicionais ou definindo funções.

Aqui está como ler cookies em uma linha de javascript . Encontrei a resposta no artigo de Guilherme Rodrigues :

('; '+document.cookie).split('; '+key+'=').pop().split(';').shift()

Isso lê o cookie nomeado key, agradável, limpo e simples.

Fabian
fonte
-1
$.cookie("test", 1); //set cookie
$.cookie("test"); //get cookie
$.cookie('test', null); //delete cookie
Hasan Badshah
fonte