JavaScript ile çerez ayarlama ve çerez alma

Question

Daha

Kaynak Non AMP-version Düzenle

JavaScript ile çerez ayarlama ve çerez alma

HTML'imde hangi CSS dosyasını seçtiğime bağlı olarak bir çerez ayarlamaya çalışıyorum. Seçenekler listesi olan bir formum ve değer olarak farklı CSS dosyalarım var. Bir dosya seçtiğimde, yaklaşık bir hafta boyunca bir çerezde saklanmalıdır. HTML dosyanızı bir sonraki açışınızda, seçtiğiniz önceki dosya olmalıdır.

JavaScript kodu:

function cssLayout() {
    document.getElementById("css").href = this.value;
}

function setCookie(){
    var date = new Date("Februari 10, 2013");
    var dateString = date.toGMTString();
    var cookieString = "Css=document.getElementById("css").href" + dateString;
    document.cookie = cookieString;
}

function getCookie(){
    alert(document.cookie);
}

HTML kodu:

<form>
    Select your css layout:<br>
    <select id="myList">
        <option value="style-1.css">CSS1</option>
        <option value="style-2.css">CSS2</option>  
        <option value="style-3.css">CSS3</option>
        <option value="style-4.css">CSS4</option>
    </select>
</form>

Aaron Martin

Edited question 2018ösp53ös21 Mart 2018 в 9:53

Programlama

javascript html cookies css

2013ösp34ös23 Ocak 2013 в 11:34

34 görünümler

B T · Answer 1 · 2013-07-08T08:18:27+00:00

Bunlar w3schools'dan (şimdiye kadar yapılmış en berbat web referansı) çok çok daha iyi referanslardır:

Bu referanslardan türetilen örnekler:

// sets the cookie cookie1
document.cookie =
 'cookie1=test; expires=Fri, 19 Jun 2020 20:47:11 UTC; path=/'

// sets the cookie cookie2 (cookie1 is *not* overwritten)
document.cookie =
 'cookie2=test; expires=Fri, 19 Jun 2020 20:47:11 UTC; path=/'

// remove cookie2
document.cookie = 'cookie2=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/'

Mozilla referansında kullanabileceğiniz güzel bir çerez kütüphanesi bile var.

Dan · Answer 2 · 2014-06-04T11:09:51+00:00

Bu sorunun, çerezlerle anahtar-değer çiftleri olarak çalışan bazı yeniden kullanılabilir kodlarla daha genel bir cevabı olması gerektiğinden eminim.

Bu parça MDN'den alınmıştır ve muhtemelen güvenilirdir. Bu, çerezlerle çalışmak için UTF-güvenli bir nesnedir:

var docCookies = {
  getItem: function (sKey) {
    return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
  },
  setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) {
    if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return false; }
    var sExpires = "";
    if (vEnd) {
      switch (vEnd.constructor) {
        case Number:
          sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd;
          break;
        case String:
          sExpires = "; expires=" + vEnd;
          break;
        case Date:
          sExpires = "; expires=" + vEnd.toUTCString();
          break;
      }
    }
    document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : "");
    return true;
  },
  removeItem: function (sKey, sPath, sDomain) {
    if (!sKey || !this.hasItem(sKey)) { return false; }
    document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + ( sDomain ? "; domain=" + sDomain : "") + ( sPath ? "; path=" + sPath : "");
    return true;
  },
  hasItem: function (sKey) {
    return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
  },
  keys: /* optional method: you can safely remove it! */ function () {
    var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/);
    for (var nIdx = 0; nIdx < aKeys.length; nIdx++) { aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]); }
    return aKeys;
  }
};

Mozilla'nın bunun her durumda işe yaradığını kanıtlayan bazı testleri var.

Alternatif bir parçacık var burada:

Munish Poonia · Answer 3 · 2013-01-29T00:20:54+00:00

JS aracılığıyla çerez değerlerini ayarlamak ve almak için [W3Schools.com'da JavaScript Çerezleri][1] bölümüne bakın.

Burada bahsedilen setCookie ve getCookie yöntemlerini kullanmanız yeterlidir.

Yani, kod aşağıdaki gibi görünecektir:


<script>
function setCookie(c_name, value, exdays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value;
}

function getCookie(c_name) {
    var i, x, y, ARRcookies = document.cookie.split(";");
    for (i = 0; i < ARRcookies.length; i++) {
        x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
        y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
        x = x.replace(/^\s+|\s+$/g, "");
        if (x == c_name) {
            return unescape(y);
        }
    }
}

function cssSelected() {
    var cssSelected = $('#myList')[0].value;
    if (cssSelected !== "select") {
        setCookie("selectedCSS", cssSelected, 3);
    }
}

$(document).ready(function() {
    $('#myList')[0].value = getCookie("selectedCSS");
})
</script>
<select id="myList" onchange="cssSelected();">
    --Select--
    CSS1
    CSS2
    CSS3
    CSS4