Jak ustawić / rozbroić plik cookie w jQuery?

1243

Jak ustawić i rozbroić plik cookie za pomocą jQuery, na przykład utworzyć plik cookie o nazwie testi ustawić wartość na 1?

o mój Boże
źródło

Odpowiedzi:

1767

Aktualizacja kwietnia 2019 r

jQuery nie jest potrzebny do odczytu / manipulacji ciasteczkami, więc nie używaj oryginalnej odpowiedzi poniżej.

Przejdź na https://github.com/js-cookie/js-cookie i użyj tam biblioteki, która nie zależy od jQuery.

Podstawowe przykłady:

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

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

Szczegółowe informacje można znaleźć w dokumentacji na github.


Zobacz wtyczkę:

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

Następnie możesz wykonać:

$.cookie("test", 1);

Usunąć:

$.removeCookie("test");

Ponadto, aby ustawić limit czasu dla określonego pliku cookie (tutaj 10):

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

Jeśli opcja wygasania zostanie pominięta, plik cookie staje się plikiem cookie sesji i jest usuwany po zamknięciu przeglądarki.

Aby uwzględnić wszystkie opcje:

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

Aby odczytać wartość pliku cookie:

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

Możesz określić parametr ścieżki, jeśli plik cookie został utworzony inną ścieżką niż bieżąca:

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

AKTUALIZACJA (kwiecień 2015):

Jak stwierdzono w komentarzach poniżej, zespół, który pracował nad oryginalną wtyczką, usunął zależność jQuery w nowym projekcie ( https://github.com/js-cookie/js-cookie ), który ma taką samą funkcjonalność i ogólną składnię jak wersja jQuery. Najwyraźniej oryginalna wtyczka nigdzie się nie wybiera.

Alistair Evans
źródło
1
z dziennika zmian: „$ .removeCookie („ foo ”) za usunięcie pliku cookie, użycie $ .cookie („ foo ”, null) jest teraz nieaktualne”
bogdan
68
@Kazar Spędziłem 6 godzin, bez przerw. W końcu zrozumiałem problem dziś rano. Używam tego z phonegap, na stronie działa bez problemów, ale na urządzeniu, gdy próbujesz odzyskać ciasteczko, które ma JSON, jest to już obiekt, więc jeśli spróbujesz JSON.parse go, to spowoduje błąd analizy JSON. Rozwiąż to za pomocą „if typeof x == 'string” ”wykonaj JSON.parse, w przeciwnym razie po prostu użyj obiektu. 6 cholernych godzin szukania błędu we wszystkich niewłaściwych miejscach
Andrei Cristian Prodan
10
usuwając plik cookie, pamiętaj również, aby ustawić ścieżkę do tej samej ścieżki, co plik cookie ustawiony pierwotnie:$.removeCookie('nameofcookie', { path: '/' });
LessQuesar,
30
Jest rok 2015 i wciąż otrzymujemy ponad 2 tys. Unikalnych trafień tygodniowo w repozytorium plików cookie jquery właśnie z tej odpowiedzi. Możemy się z tego nauczyć kilku rzeczy: 1. ciasteczka wkrótce nie umrą i 2. Ludzie nadal szukają w Google „wtyczki jquery, aby uratować świat”. jQuery NIE jest konieczne do obsługi plików cookie, nazwa pliku cookie jquery jest zmieniana na js-cookie ( github.com/js-cookie/js-cookie ), a zależność jquery została opcjonalna w wersji 1.5.0. Pojawi się wersja 2.0.0 z wieloma interesującymi rzeczami, warto rzucić okiem i przyczynić się, dzięki!
Fagner Brack
2
@Kazar Nie planujemy fizycznego przeniesienia go, istnieje znaczny ogólny ruch do tego adresu URL z kilku źródeł, a Klaus jest historycznym właścicielem przestrzeni nazw „jquery-cookie”. Nie trzeba się martwić, że ten adres URL zniknie w najbliższym czasie. Mimo to zachęcam wszystkich do oglądania nowego repozytorium aktualizacji.
Fagner Brack
429

Nie ma potrzeby używania jQuery szczególnie do manipulowania plikami cookie.

From QuirksMode (w tym znaki ucieczki)

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

Spojrzeć na

Russ Cam
źródło
2
Cześć Russ, zaletą jquery cookie jest to, że ucieka on od danych
Svetoslav Marinov
2
@lordspace - Po prostu zawiń wartość w window.escape / unescape, aby odpowiednio zapisać / pobrać wartość ciasteczka :)
Russ Cam
46
Lepszy kod cookie można znaleźć tutaj: developer.mozilla.org/en/DOM/document.cookie
SDC
3
wtyczka ciasteczka jQuery jest znacznie prostsza
brauliobo
1
zamiast escape lub unescape możesz użyć encodeURI lub 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>

Możesz ustawić pliki cookie tak jak

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

Możesz dostać ciasteczka jak chcesz

getCookie('test');

I w końcu możesz usunąć takie pliki cookie

eraseCookie('test');

Mam nadzieję, że to komuś pomoże :)

EDYTOWAĆ:

Jeśli chcesz ustawić plik cookie na cały katalog ścieżka / strona /, ustaw atrybut ścieżki do pliku 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();
}

Dzięki, Vicky

Vignesh Pichamani
źródło
1
60 * 1000 = 60 sekund 60 * (60 * 1000) = 60 minut, czyli 1 godzina 24 * (60 * (60 * 1000)) = 1 dzień, który 24 godziny Mam nadzieję, że to pomaga.
Vignesh Pichamani,
1
1 * 24 * 60 * 60 * 1000 Dostosuj 1 na 1 dzień lub możesz zrobić 365
Vignesh Pichamani
1
Dobre funkcje ... Ale dlaczego znajdują się w znaczniku document.ready?
Dss
1
To nie będzie działać w Safari lub IE żadnych znaków spoza zakresu ASCII, takie jak é, itd Również, to nie będzie działać dla niektórych znaków specjalnych, które nie są dozwolone w cookies-ciasteczka nazwy lub wartości. Polecam następujące odniesienie: tools.ietf.org/html/rfc6265
Fagner Brack
18

Możesz użyć wtyczki dostępnej tutaj ..

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

a następnie napisać ciasteczko zrobić $.cookie("test", 1);

aby uzyskać dostęp do ustawionego pliku cookie wykonaj $.cookie("test");

Divyesh Kanzariya
źródło
3
dostępna jest nowsza wersja tej wtyczki
Andrei Cristian Prodan
13

Oto mój globalny moduł, którego używam -

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
źródło
10

Pamiętaj, aby nie robić czegoś takiego:

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

Następnie, jeśli plik cookie nie istnieje, debuger zwróci jakąś nieprzydatną wiadomość, taką jak „.cookie not a function”.

Zawsze najpierw deklaruj, a następnie dokonaj podziału po sprawdzeniu wartości null. Lubię to:

var a = $.cookie("cart");
if (a != null) {
    var aa = a.split(",");
użytkownik890332
źródło
Przykładowy kod nie jest kompletny. Czy }brakuje tylko jednego , czy brakuje kilku linii kodu?
Peter Mortensen
Brakuje tylko jednego singla, ale oczywiście musisz dodać więcej wierszy kodu, aby kontynuować to, co chcesz zrobić z podziałem.
user890332
8

Oto jak ustawić plik cookie za pomocą JavaScript:

poniższy kod pochodzi z 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=/";
}

teraz możesz uzyskać plik cookie z poniższą funkcją:

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

I w ten sposób sprawdzasz ciasteczko:

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

Jeśli chcesz usunąć plik cookie, po prostu ustaw parametr expires na minięty termin:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
S1awek
źródło
7

Prosty przykład ustawienia pliku cookie w przeglądarce:

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

Wystarczy skopiować / wkleić i użyć tego kodu do ustawienia pliku cookie.

Webpixstudio
źródło
1
Uwaga: przeglądarka domyślnie buforuje zasoby zgodnie z ich nazwami plików. W tym przykładzie jquery-1.9.0.min.jszostanie ponownie załadowany dla wszystkich, gdy nazwa pliku zostanie zaktualizowana jquery-1.9.1.min.js, w przeciwnym razie przeglądarka wcale NIE wysyła żądania do serwera w celu sprawdzenia zaktualizowanej zawartości. Jeśli zaktualizujesz kod wewnątrz jquery.cookie.jsbez zmiany jego nazwy pliku, NIE MOŻNA go ponownie załadować w przeglądarkach, które już buforowały jquery.cookie.jszasób.
Fagner Brack
Jeśli piszesz witrynę internetową i kopiujesz / wklejasz ją, pamiętaj, że to nie zadziała, jeśli zaktualizujesz jquery.cookie.jswersję bez zmiany nazwy pliku (chyba że twój serwer zajmuje się buforowaniem przy użyciu E-tagów).
Fagner Brack
if ($ .cookie ('cookieStore')) {var data = JSON.parse ($. cookie („cookieStore”)); // gdy nie można załadować strony na innej stronie $ ('# name'). text (data [0]); $ („# adres”). tekst (dane [1]); }
Mohammad Javad
5

Możesz skorzystać z biblioteki na stronie Mozilli tutaj

Będziesz mógł ustawić i uzyskać takie pliki cookie

docCookies.setItem(name, value);
docCookies.getItem(name);
Moustafa Samir
źródło
3

Myślę, że Fresher dał nam dobry sposób, ale jest błąd:

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

Powinieneś dodać „wartość” w pobliżu getTime (); w przeciwnym razie plik cookie wygaśnie natychmiast :)

barman
źródło
2
„wartość” może być ciągiem. W pytaniu używa 1 jako przykładu. Wartość powinna być równa kluczowi, a nie długość w dniach przed wygaśnięciem pliku cookie. Jeśli wartość zostanie przekazana jako „foo”, Twoja wersja ulegnie awarii.
Peter
1

Myślałem Vignesh Pichamani była najprostsza i najczystsza. Właśnie dodając do jego możliwości ustawienia liczby dni przed datą wygaśnięcia:

EDYCJA: dodano także opcję „nigdy nie wygasa”, jeśli nie ustawiono numeru dnia

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

Ustaw ciasteczko:

setCookie('myData', 1, 30); // myData=1 for 30 days. 
setCookie('myData', 1); // myData=1 'forever' (until the year 9999) 
Freeworlder
źródło
1

Wiem, że jest wiele świetnych odpowiedzi. Często muszę tylko czytać pliki cookie i nie chcę tworzyć kosztów ogólnych poprzez ładowanie dodatkowych bibliotek lub definiowanie funkcji.

Oto jak czytać pliki cookie w jednym wierszu javascript . Odpowiedź znalazłem w artykule na blogu Guilherme Rodrigues :

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

Odczytuje to plik cookie o nazwie key, ładny, czysty i prosty.

fabiański
źródło
-1
$.cookie("test", 1); //set cookie
$.cookie("test"); //get cookie
$.cookie('test', null); //delete cookie
Hasan Badshah
źródło