Jak ustawić / rozbroić plik cookie w jQuery?

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

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.

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

• Jak usunąć istniejącą nazwę klasy i dodać nową za pomocą jQuery i plików cookie?

<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

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

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

};

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

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

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.

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

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

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) 

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.

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