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

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?

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.

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 à

• Comment supprimer un nom de classe existant et en ajouter un nouveau avec jQuery et les cookies?

<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

Vous pouvez utiliser un plugin disponible ici ..

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

puis pour écrire un cookie faire $.cookie("test", 1);

pour accéder au cookie défini faire $.cookie("test");

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

};

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(",");

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

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.

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

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

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) 

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.

$.cookie("test", 1); //set cookie
$.cookie("test"); //get cookie
$.cookie('test', null); //delete cookie