Wie setze / deaktiviere ich ein Cookie mit jQuery?

Wie setze und deaktiviere ich ein Cookie mit jQuery, erstelle ich beispielsweise ein Cookie mit dem Namen testund setze den Wert auf 1?

Update April 2019

jQuery wird zum Lesen / Bearbeiten von Cookies nicht benötigt. Verwenden Sie daher nicht die ursprüngliche Antwort unten.

Gehen Sie stattdessen zu https://github.com/js-cookie/js-cookie und verwenden Sie dort die Bibliothek, die nicht von jQuery abhängt.

Grundlegende Beispiele:

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

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

Weitere Informationen finden Sie in den Dokumenten auf Github.

Siehe das Plugin:

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

Sie können dann tun:

$.cookie("test", 1);

Löschen:

$.removeCookie("test");

So legen Sie eine Zeitüberschreitung für eine bestimmte Anzahl von Tagen (hier 10) für das Cookie fest:

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

Wenn die Option "Abläuft" weggelassen wird, wird das Cookie zu einem Sitzungscookie und wird beim Beenden des Browsers gelöscht.

So decken Sie alle Optionen ab:

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

So lesen Sie den Wert des Cookies zurück:

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

Möglicherweise möchten Sie den Pfadparameter angeben, wenn das Cookie auf einem anderen als dem aktuellen Pfad erstellt wurde:

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

UPDATE (April 2015):

Wie in den Kommentaren unten angegeben, hat das Team, das am ursprünglichen Plugin gearbeitet hat, die jQuery-Abhängigkeit in einem neuen Projekt ( https://github.com/js-cookie/js-cookie ) entfernt, das dieselbe Funktionalität und allgemeine Syntax wie hat die jQuery-Version. Anscheinend geht das ursprüngliche Plugin nirgendwo hin.

Es ist nicht erforderlich, jQuery speziell zum Bearbeiten von Cookies zu verwenden.

Aus QuirksMode (einschließlich Escapezeichen )

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

Schau es dir an

• Wie entferne ich einen vorhandenen Klassennamen und füge einen neuen mit jQuery und Cookies hinzu?

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

Sie können die Cookies wie folgt setzen

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

Sie können die Cookies wie erhalten

getCookie('test');

Und schließlich können Sie die Cookies wie dieses löschen

eraseCookie('test');

Hoffe es hilft jemandem :)

BEARBEITEN:

Wenn Sie das Cookie auf den gesamten Pfad / die Seite / das Verzeichnis setzen möchten, setzen Sie das Pfadattribut auf das 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();
}

Danke, Vicky

Sie können ein hier verfügbares Plugin verwenden.

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

und dann einen Cookie schreiben $.cookie("test", 1);

um auf das gesetzte Cookie zuzugreifen, tun Sie $.cookie("test");

Hier ist mein globales Modul, das ich benutze -

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

};

Stellen Sie sicher, dass Sie so etwas nicht tun:

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

Wenn das Cookie dann nicht vorhanden ist, gibt der Debugger eine nicht hilfreiche Nachricht wie ".cookie not a function" zurück.

Immer deklarieren und dann die Aufteilung durchführen, nachdem auf Null geprüft wurde. So was:

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

So setzen Sie das Cookie mit JavaScript:

Der folgende Code wurde von https://www.w3schools.com/js/js_cookies.asp übernommen

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

Jetzt können Sie den Cookie mit der folgenden Funktion erhalten:

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

Und schließlich überprüfen Sie den Cookie folgendermaßen:

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

Wenn Sie das Cookie löschen möchten, setzen Sie den Parameter expires einfach auf ein übergebenes Datum:

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

Ein einfaches Beispiel für das Setzen von Cookies in Ihrem Browser:

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

Einfach kopieren / einfügen und diesen Code zum Setzen Ihres Cookies verwenden.

Sie können die Bibliothek auf der Mozilla-Website hier verwenden

Sie können solche Cookies setzen und erhalten

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

Ich denke, Fresher hat uns einen guten Weg gegeben, aber es gibt einen Fehler:

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

Sie sollten "Wert" in der Nähe von getTime () hinzufügen. Andernfalls läuft der Cookie sofort ab :)

Ich dachte, Vignesh Pichamanis Antwort sei die einfachste und sauberste. Fügen Sie ihm einfach die Möglichkeit hinzu, die Anzahl der Tage vor Ablauf festzulegen:

BEARBEITEN: Außerdem wurde die Option "Nie läuft ab" hinzugefügt, wenn keine Tagesnummer festgelegt ist

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

Setzen Sie den Cookie:

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

Ich weiß, dass es viele gute Antworten gibt. Oft muss ich nur Cookies lesen und möchte keinen Overhead erzeugen, indem ich zusätzliche Bibliotheken lade oder Funktionen definiere.

Hier erfahren Sie, wie Sie Cookies in einer Zeile Javascript lesen . Ich fand die Antwort in Guilherme Rodrigues 'Blog-Artikel :

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

Dies liest den Cookie namens key, nett, sauber und einfach.

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