JQuery ile bir çerezi nasıl ayarlayabilir / kaldırabilirim?

JQuery kullanarak bir çerezi nasıl ayarlayabilir ve ayarını kaldırabilirim, örneğin adlı bir tanımlama bilgisi oluşturabilir testve değeri olarak ayarlayabilirim 1?

Nisan 2019 Güncellemesi

jQuery çerez okuma / değiştirme için gerekli değildir, bu nedenle aşağıdaki orijinal cevabı kullanmayın.

Bunun yerine https://github.com/js-cookie/js-cookie adresine gidin ve orada jQuery'ye bağlı olmayan kütüphaneyi kullanın.

Temel örnekler:

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

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

Ayrıntılar için github'daki dokümanlara bakın.

Eklentiye bakın:

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

Daha sonra şunları yapabilirsiniz:

$.cookie("test", 1);

Silmek:

$.removeCookie("test");

Ayrıca, çerezde belirli sayıda gün (burada 10) zaman aşımı süresi ayarlamak için:

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

Sona erme seçeneği atlanırsa, çerez bir oturum çerezi olur ve tarayıcıdan çıkıldığında silinir.

Tüm seçenekleri kapsamak için:

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

Çerezin değerini tekrar okumak için:

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

Çerez geçerli olandan farklı bir yolda oluşturulmuşsa path parametresini belirtmek isteyebilirsiniz:

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

GÜNCELLEME (Nisan 2015):

Aşağıdaki yorumlarda belirtildiği gibi, orijinal eklenti üzerinde çalışan ekip , aynı işlevselliğe ve genel sözdizimine sahip yeni bir projede ( https://github.com/js-cookie/js-cookie ) jQuery bağımlılığını kaldırdı. jQuery sürümü. Görünüşe göre orijinal eklenti hiçbir yere gitmiyor.

Özellikle çerezleri işlemek için jQuery kullanmaya gerek yoktur.

Gönderen QuirksMode (kaçan karakterleri dahil)

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

Şuna baksana

• Mevcut bir sınıf adını nasıl kaldırabilir ve jQuery ve çerezlerle yeni bir ad ekleyebilirim?

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

Çerezleri istediğiniz gibi ayarlayabilirsiniz

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

Çerezleri istediğiniz gibi alabilirsiniz

getCookie('test');

Ve son olarak böyle çerezleri silebilirsiniz

eraseCookie('test');

Umarım birine yardımcı olur :)

DÜZENLE:

Çerezi tüm yol / sayfa / dizine ayarlamak istiyorsanız, çerez için yol niteliğini ayarlayın

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

Teşekkürler, vicky

Burada bulunan bir eklenti kullanabilirsiniz ..

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

ve sonra bir çerez yazmak $.cookie("test", 1);

set çerezine erişmek için $.cookie("test");

İşte kullandığım global modülüm -

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

};

Böyle bir şey yapmadığınızdan emin olun:

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

Çerez yoksa, hata ayıklayıcı ".cookie bir işlev değil" gibi yararsız bir mesaj döndürür.

Her zaman önce ilan edin, sonra null olup olmadığını kontrol ettikten sonra bölünmeyi yapın. Bunun gibi:

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

Çerezi JavaScript ile nasıl ayarlayacağınız aşağıda açıklanmıştır:

Aşağıdaki kod https://www.w3schools.com/js/js_cookies.asp adresinden alınmıştır.

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

şimdi aşağıdaki fonksiyonu ile çerez alabilirsiniz:

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

Ve son olarak çerezi şu şekilde kontrol edersiniz:

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

Çerezi silmek istiyorsanız, expires parametresini geçirilen bir tarihe ayarlayın:

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

Tarayıcınızda çerez ayarlamak için basit bir örnek:

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

Basitçe kopyala / yapıştır ve çerezini ayarlamak için bu kodu kullan.

Sen Mozilla web sitesinde kütüphaneyi kullanabilirsiniz burada

Bunun gibi çerezleri ayarlayabilir ve alabilirsiniz

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

Bence Fresher bize güzel bir yol verdi, ama bir hata var:

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

GetTime () yakınına "değer" eklemelisiniz; aksi takdirde çerezin süresi hemen dolar :)

Vignesh Pichamani'nin cevabının en basit ve en temiz olduğunu düşündüm . Sadece onun sona ermeden gün sayısını ayarlama yeteneğini ekleyerek:

DÜZENLE: gün numarası ayarlanmadıysa 'asla sona ermez' seçeneği de eklendi

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

Çerezi ayarlayın:

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

Çok büyük cevaplar olduğunu biliyorum. Genellikle, yalnızca çerezleri okumam gerekir ve ek kütüphaneler yükleyerek veya işlevleri tanımlayarak ek yük oluşturmak istemiyorum.

Javascript'in bir satırındaki çerezleri nasıl okuyacağınız aşağıda açıklanmıştır . Cevabı Guilherme Rodrigues'in blog makalesinde buldum :

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

Bu key, güzel, temiz ve basit adlı çerezi okur .

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