Comment définir / désactiver un cookie avec jQuery?


1244

Comment définir et désactiver un cookie à l'aide de jQuery, par exemple créer un cookie nommé testet définir la valeur sur 1?

Réponses:


1767

Mise à jour avril 2019

jQuery n'est pas nécessaire pour la lecture / manipulation des cookies, alors n'utilisez pas la réponse d'origine ci-dessous.

Accédez à https://github.com/js-cookie/js-cookie à la place et utilisez la bibliothèque qui ne dépend pas de jQuery.

Exemples de base:

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

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

Voir les documents sur github pour plus de détails.


Voir le plugin:

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

Vous pouvez alors faire:

$.cookie("test", 1);

Supprimer:

$.removeCookie("test");

De plus, pour définir un délai d'expiration d'un certain nombre de jours (10 ici) sur le cookie:

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

Si l'option expire est omise, le cookie devient un cookie de session et est supprimé à la fermeture du navigateur.

Pour couvrir toutes les options:

$.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).
});

Pour relire la valeur du cookie:

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

Vous pouvez spécifier le paramètre de chemin si le cookie a été créé sur un chemin différent du chemin actuel:

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

MISE À JOUR (avril 2015):

Comme indiqué dans les commentaires ci-dessous, l'équipe qui a travaillé sur le plugin d'origine a supprimé la dépendance jQuery dans un nouveau projet ( https://github.com/js-cookie/js-cookie ) qui a la même fonctionnalité et la même syntaxe générale que la version jQuery. Apparemment, le plugin d'origine ne va nulle part.


1
du journal des modifications: "$ .removeCookie ('foo') pour supprimer un cookie, l'utilisation de $ .cookie ('foo', null) est désormais déconseillée"
bogdan

68
@Kazar J'ai passé 6 heures, pas de pause. J'ai finalement réalisé le problème ce matin. J'utilise ceci avec phonegap, sur le site, cela fonctionne sans problème, mais sur l'appareil, lorsque vous essayez de récupérer le cookie qui a un JSON, c'est déjà un objet, donc si vous essayez de JSON. donnera une erreur d'analyse JSON. Résolu avec un "if typeof x == 'string'" faire le JSON.parse, sinon, il suffit d'utiliser l'objet. 6 putains d'heures à la recherche de l'erreur aux mauvais endroits
Andrei Cristian Prodan

10
lors de la suppression du cookie, assurez-vous de définir également le chemin d'accès sur le même chemin que celui défini à l'origine pour le cookie:$.removeCookie('nameofcookie', { path: '/' });
LessQuesar

30
Nous sommes en 2015 et nous recevons toujours plus de 2 000 hits uniques par semaine dans le référentiel jquery-cookie juste à partir de cette réponse. Deux choses que nous pouvons apprendre de cela: 1. les cookies ne vont pas mourir bientôt et 2. Les gens recherchent toujours un "plugin jquery pour sauver le monde". jQuery n'est PAS nécessaire pour gérer les cookies, jquery-cookie est renommé en js-cookie ( github.com/js-cookie/js-cookie ) et la dépendance jquery a été rendue facultative dans la version 1.5.0. Il y aura une version 2.0.0 avec beaucoup de trucs intéressants, ça vaut le coup d'y jeter un œil et d'y contribuer, merci!
Fagner Brack

2
@Kazar Nous ne prévoyons pas de le déplacer physiquement, il y a un trafic global considérable vers cette URL depuis plusieurs sources et Klaus est le propriétaire historique de l'espace de noms "jquery-cookie". Il n'y a pas lieu de s'inquiéter de la disparition prochaine de cette URL. Mais encore, j'encourage tout le monde à commencer à regarder le nouveau référentiel pour les mises à jour.
Fagner Brack

429

Il n'est pas nécessaire d'utiliser jQuery en particulier pour manipuler les cookies.

Depuis QuirksMode (y compris les caractères d'échappement)

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);
}

Jeter un coup d'œil à


2
Salut Russ, la bonne chose à propos du cookie jquery est qu'il échappe aux données
Svetoslav Marinov

2
@lordspace - Enveloppez simplement la valeur dans window.escape / unescape pour écrire / récupérer la valeur du cookie, respectivement :)
Russ Cam

46
Un meilleur code de cookie peut être trouvé ici: developer.mozilla.org/en/DOM/document.cookie
SDC

3
le plugin cookie jQuery est beaucoup plus simple
brauliobo

1
au lieu de s'échapper ou de s'échapper, vous pouvez utiliser 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>

Vous pouvez définir les cookies comme comme

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

Vous pouvez obtenir les cookies comme

getCookie('test');

Et enfin, vous pouvez effacer les cookies comme celui-ci

eraseCookie('test');

J'espère que cela aidera quelqu'un :)

ÉDITER:

Si vous souhaitez définir le cookie sur tout le chemin / page / répertoire, définissez l'attribut path sur le 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();
}

Merci, vicky


1
60 * 1000 = 60 secondes 60 * (60 * 1000) = 60 minutes soit 1 heure 24 * (60 * (60 * 1000)) = 1 jour dont 24 heures J'espère que cela aide.
Vignesh Pichamani

1
1 * 24 * 60 * 60 * 1000 personnaliser 1 pour 1 jour ou vous pouvez faire 365
Vignesh Pichamani

1
Bonnes fonctions ... Mais pourquoi sont-ils à l'intérieur d'une balise document.ready?
Dss

1
Cela ne fonctionnera pas dans Safari ou IE pour tous les caractères en dehors de la plage ASCII, tels que é, etc. Je recommande la référence suivante: tools.ietf.org/html/rfc6265
Fagner Brack


13

Voici mon module global que j'utilise -

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);
    }

};

10

Assurez-vous de ne pas faire quelque chose comme ça:

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

Ensuite, si le cookie n'existe pas, le débogueur renverra un message inutile comme ".cookie pas une fonction".

Déclarez toujours d'abord, puis effectuez le fractionnement après avoir vérifié la valeur null. Comme ça:

var a = $.cookie("cart");
if (a != null) {
    var aa = a.split(",");

L'exemple de code n'est pas complet. Est-ce seulement un seul }qui manque ou y a-t-il plusieurs lignes de code manquantes?
Peter Mortensen

C'est juste un singe} manquant, mais vous devrez évidemment ajouter plus de lignes de code pour continuer ce que vous voulez faire avec le split.
user890332

8

Voici comment définir le cookie avec JavaScript:

le code ci-dessous provient 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=/";
}

vous pouvez maintenant obtenir le cookie avec la fonction ci-dessous:

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

Et enfin, voici comment vous vérifiez le 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);
        }
    }
}

Si vous souhaitez supprimer le cookie, définissez simplement le paramètre expires sur une date passée:

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

7

Un exemple simple de définir un cookie dans votre navigateur:

<!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>

Copiez / collez simplement et utilisez ce code pour définir votre cookie.


1
Juste une note, le navigateur cache par défaut les ressources selon leurs noms de fichiers. Dans cet exemple, jquery-1.9.0.min.jssera rechargé pour tout le monde lorsque le nom de fichier est mis à jour jquery-1.9.1.min.js, sinon le navigateur ne fera AUCUNE demande au serveur pour vérifier le contenu mis à jour. Si vous mettez à jour le code à l'intérieur jquery.cookie.jssans modifier son nom de fichier, il peut ne PAS être rechargé dans les navigateurs qui ont déjà mis en cache la jquery.cookie.jsressource.
Fagner Brack

Si vous écrivez un site Web et copiez / collez cela, sachez que cela ne fonctionnera pas si vous mettez à jour la jquery.cookie.jsversion sans changer son nom de fichier (à moins que votre serveur ne s'occupe de la mise en cache à l'aide d'E-Tags).
Fagner Brack

if ($ .cookie ('cookieStore')) {var data = JSON.parse ($. cookie ("cookieStore")); // lorsque la page de chargement dans une autre page est introuvable $ ('# nom'). text (data [0]); $ ('# adresse'). text (data [1]); }
Mohammad Javad

5

Vous pouvez utiliser la bibliothèque sur le site Web de Mozilla ici

Vous pourrez définir et obtenir des cookies comme celui-ci

docCookies.setItem(name, value);
docCookies.getItem(name);

3

Je pense que Fresher nous a donné un bon moyen, mais il y a une erreur:

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

Vous devez ajouter "valeur" près de getTime (); sinon le cookie expirera immédiatement :)


2
"valeur" pourrait être une chaîne. Dans la question, il utilise 1 comme exemple. La valeur doit correspondre à la clé, et non à la longueur en jours avant l'expiration du cookie. Si la valeur était passée en tant que "foo", votre version planterait.
Peter

1

Je pensais que la réponse de Vignesh Pichamani était la plus simple et la plus propre. Ajoutant simplement à sa capacité de définir le nombre de jours avant l'expiration:

EDIT: également ajouté l'option «n'expire jamais» si aucun numéro de jour n'est défini

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

Définissez le cookie:

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

1

Je sais qu'il y a beaucoup de bonnes réponses. Souvent, je n'ai besoin que de lire les cookies et je ne veux pas créer de surcharge en chargeant des bibliothèques supplémentaires ou en définissant des fonctions.

Voici comment lire les cookies sur une seule ligne de javascript . J'ai trouvé la réponse dans l' article du blog de Guilherme Rodrigues :

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

Cela lit le cookie nommé key, agréable, propre et simple.


-1
$.cookie("test", 1); //set cookie
$.cookie("test"); //get cookie
$.cookie('test', null); //delete cookie
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.