it-swarm.com.de

Wie setze / deaktiviere ich ein Cookie mit jQuery?

Wie kann ich ein Cookie mit jQuery setzen und entfernen, zum Beispiel ein Cookie mit dem Namen test erstellen und den Wert auf 1 setzen?

1192
omg

Update April 2019

jQuery wird zum Lesen/Bearbeiten von Cookies nicht benötigt. Verwenden Sie daher nicht die unten stehende Originalantwort.

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'

Einzelheiten finden Sie in den Dokumenten zu github.


Siehe das Plugin:

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

Sie können dann Folgendes 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 Ablaufoption weggelassen wird, wird das Cookie zu einem Sitzungscookie und wird gelöscht, wenn der Browser beendet wird.

Um alle Optionen abzudecken:

$.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 Pfad als dem aktuellen 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 Dieselbe Funktionalität und allgemeine Syntax wie die jQuery-Version. Anscheinend geht das ursprüngliche Plugin aber nirgendwo hin.

1707
Kazar

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

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

Schauen Sie sich an

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>

Sie können die Cookies wie folgt einstellen

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

Sie können die Cookies wie gewünscht erhalten

getCookie('test');

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

eraseCookie('test');

Hoffe es hilft jemandem :)

EDIT:

Wenn Sie das Cookie auf alle Pfade/Seiten/Verzeichnisse 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

129

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

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

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

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

17
user177016

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

};
11
seanjacob

Stellen Sie sicher, dass Sie so etwas nicht tun:

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

Wenn das Cookie dann nicht existiert, gibt der Debugger eine nicht hilfreiche Meldung wie ".cookie keine Funktion" zurück.

Deklarieren Sie immer zuerst und führen Sie dann die Aufteilung durch, nachdem Sie auf null geprüft haben. So was:

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

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.

7
Webpixstudio

So setzen Sie den Cookie mit JavaScript:

der folgende Code stammt von 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=/";
}

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 zum Schluss überprüfen Sie den Cookie so:

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 expires-Parameter auf ein vergangenes Datum:

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

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

Sie können Cookies wie diese setzen und erhalten

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

Ich denke, Fresher hat uns einen schönen Weg gezeigt, 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 "value" in der Nähe von getTime () hinzufügen. sonst verfällt der Cookie sofort :)

3
barmyman

Ich weiß, dass es viele gute Antworten gibt. Oft muss ich nur Cookies lesen und möchte keinen Overhead durch das Laden zusätzlicher Bibliotheken oder das Definieren von Funktionen erzeugen.

Hier erfahren Sie , wie Sie Cookies in einer Zeile Javascript lesen . Ich fand die Antwort in Blogartikel von Guilherme Rodrigues :

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

Dies liest den Cookie mit dem Namen key, Nett, sauber und einfach.

1
Fabian

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

BEARBEITEN: Die Option "Läuft nie ab" wurde 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) 
0
freeworlder