Wie setze / deaktiviere ich ein Cookie mit jQuery?

1244

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

Oh mein Gott
quelle

Antworten:

1767

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.

Alistair Evans
quelle
1
aus dem Changelog: "$ .removeCookie ('foo') zum Löschen eines Cookies mit $ .cookie ('foo', null) ist jetzt veraltet"
bogdan
68
@ Kazar Ich verbrachte 6 Stunden, keine Pausen. Ich habe das Problem heute Morgen endlich erkannt. Ich verwende dies mit Phonegap, auf der Site funktioniert es ohne Probleme, aber auf dem Gerät ist es bereits ein Objekt, wenn Sie versuchen, das Cookie mit einem JSON abzurufen. Wenn Sie also versuchen, es mit JSON zu analysieren, ist es es gibt einen JSON-Analysefehler aus. Es wurde mit einem "if typeof x == 'string'" gelöst. Führen Sie die JSON.parse aus. Andernfalls verwenden Sie einfach das Objekt. 6 verdammte Stunden auf der Suche nach dem Fehler an den falschen Stellen
Andrei Cristian Prodan
10
$.removeCookie('nameofcookie', { path: '/' });
Stellen
30
Es ist 2015 und wir erhalten immer noch mehr als 2.000 eindeutige Treffer pro Woche im jquery-cookie-Repository, nur aufgrund dieser Antwort. Ein paar Dinge, die wir daraus lernen können: 1. Cookies werden nicht bald sterben und 2. Die Leute googeln immer noch nach einem "JQuery-Plugin, um die Welt zu retten". jQuery ist für den Umgang mit Cookies NICHT erforderlich, jquery-cookie wird in js-cookie ( github.com/js-cookie/js-cookie ) umbenannt und die jquery-Abhängigkeit wurde in Version 1.5.0 optional gemacht. Es wird eine Version 2.0.0 mit vielen interessanten Dingen geben, es lohnt sich, einen Blick darauf zu werfen und einen Beitrag zu leisten, danke!
Fagner Brack
2
@Kazar Wir planen nicht, es physisch zu verschieben, es gibt eine beträchtliche Menge an Datenverkehr zu dieser URL aus verschiedenen Quellen und Klaus ist der historische Eigentümer des Namespace "jquery-cookie". Sie müssen sich keine Sorgen machen, dass diese URL bald nicht mehr verfügbar ist. Trotzdem möchte ich alle dazu ermutigen, das neue Repository nach Updates zu durchsuchen.
Fagner Brack
429

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

Russ Cam
quelle
2
Hallo Russ, das Gute an jquery cookie ist, dass es den Daten entgeht
Svetoslav Marinov
2
@lordspace - Einfach den Wert in window.escape / unescape einschließen, um den Cookie-Wert zu schreiben / abzurufen :)
Russ Cam
46
Besserer Cookie-Code finden Sie hier: developer.mozilla.org/en/DOM/document.cookie
DEZA
3
Das jQuery Cookie Plugin ist viel einfacher
Brauliobo
1
Anstelle von Flucht oder Flucht können Sie encodeURI oder 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>

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

Vignesh Pichamani
quelle
1
60 * 1000 = 60 Sekunden 60 * (60 * 1000) = 60 Minuten, das ist 1 Stunde 24 * (60 * (60 * 1000)) = 1 Tag, 24 Stunden Ich hoffe, es hilft.
Vignesh Pichamani
1
1 * 24 * 60 * 60 * 1000 passen Sie 1 für 1 Tag an oder Sie können 365
Vignesh Pichamani
1
Gute Funktionen ... Aber warum befinden sie sich in einem document.ready-Tag?
Dss
1
Das wird nicht zur Arbeit in Safari oder IE für beliebige Zeichen außerhalb des ASCII - Bereichs, wie zum Beispiel é, usw. Auch ist dies nicht für einige Sonderzeichen zur Arbeit zu gehen , die in den Cookie-Namen oder die Cookie-Wert ist nicht erlaubt. Ich empfehle die folgende Referenz: tools.ietf.org/html/rfc6265
Fagner Brack
18

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

Divyesh Kanzariya
quelle
3
Es gibt eine neuere Version dieses Plugins
Andrei Cristian Prodan
13

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

};
Seanjacob
quelle
10

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(",");
user890332
quelle
Der Beispielcode ist nicht vollständig. Fehlt nur eine einzige }oder fehlen mehrere Codezeilen?
Peter Mortensen
Es fehlt nur ein einziger Fehler, aber natürlich müssen Sie weitere Codezeilen hinzufügen, um fortzufahren, was Sie mit der Aufteilung tun möchten.
user890332
8

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

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.

Webpixstudio
quelle
1
Nur eine Anmerkung, der Browser speichert die Ressourcen standardmäßig entsprechend ihren Dateinamen zwischen. In diesem Beispiel jquery-1.9.0.min.jswird es für alle neu geladen, wenn der Dateiname aktualisiert jquery-1.9.1.min.jswird. Andernfalls fordert der Browser den Server NICHT auf, nach aktualisierten Inhalten zu suchen. Wenn Sie den Code im Inneren aktualisieren, jquery.cookie.jsohne den Dateinamen zu ändern, wird er möglicherweise NICHT in Browsern neu geladen, die die jquery.cookie.jsRessource bereits zwischengespeichert haben .
Fagner Brack
Wenn Sie eine Website schreiben und diese kopieren / einfügen, beachten Sie, dass dies nicht funktioniert, wenn Sie die jquery.cookie.jsVersion aktualisieren, ohne den Dateinamen zu ändern (es sei denn, Ihr Server befasst sich mit dem Caching mithilfe von E-Tags).
Fagner Brack
if ($ .cookie ('cookieStore')) {var data = JSON.parse ($. cookie ("cookieStore")); // wenn Seite in andere Seite geladen nicht gefunden wurde $ ('# name'). text (data [0]); $ ('# address'). text (data [1]); }
Mohammad Javad
5

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);
Moustafa Samir
quelle
3

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

Barmyman
quelle
2
"Wert" könnte eine Zeichenfolge sein. In der Frage verwendet er 1 als Beispiel. Der Wert sollte dem Schlüssel entsprechen, nicht der Länge in Tagen vor Ablauf des Cookies. Wenn der Wert als "foo" übergeben würde, würde Ihre Version abstürzen.
Peter
1

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) 
Freeworlder
quelle
1

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.

Fabian
quelle
-1
$.cookie("test", 1); //set cookie
$.cookie("test"); //get cookie
$.cookie('test', null); //delete cookie
Hasan Badshah
quelle