web-dev-qa-db-fra.com

Comment définir / annuler la création d'un cookie avec jQuery?

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

javascriptjquerycookies
1192
omg

Mise à jour avril 2019

jQuery n'est pas nécessaire pour la lecture/manipulation de cookies, n'utilisez donc pas la réponse originale ci-dessous.

Allez plutôt à https://github.com/js-cookie/js-cookie 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 la documentation 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 expires 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 voudrez peut-être spécifier le paramètre path si le cookie a été créé sur un chemin différent de celui en cours:

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

UPDATE (avril 2015):

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

1707
Kazar

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

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

416
Russ Cam
<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

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 ça aidera à quelqu'un :)

EDIT:

Si vous souhaitez définir le cookie sur tous les chemins/pages/répertoires, 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

129
Vignesh Pichamani

Vous pouvez utiliser un plugin disponible ici ..

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

et ensuite écrire un cookie do $.cookie("test", 1);

pour accéder au jeu de cookies, faites $.cookie("test");

17
user177016

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

};
11
seanjacob

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 la scission après avoir vérifié la valeur null. Comme ça:

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

Un exemple simple de cookie défini 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>

Il suffit simplement de copier/coller et d’utiliser ce code pour définir votre cookie.

7
Webpixstudio

Voici comment vous définissez 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=/";
}

maintenant vous pouvez 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 vérifier 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 donnée:

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

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

Vous pourrez créer et obtenir des cookies comme celui-ci

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

Je pense que Fresher nous a donné le bon chemin, 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 devriez ajouter "valeur" près de getTime (); sinon le cookie expirera immédiatement :)

3
barmyman

Je sais qu'il y a beaucoup de bonnes réponses. Souvent, je n'ai besoin que de lire des 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 dans une ligne de javascript . J'ai trouvé la réponse dans article de blog de Guilherme Rodrigues :

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

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

1
Fabian

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

EDIT: ajout de 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éfinir le cookie:

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