javascript - Çerezi adıyla al

Bir çerezden değeri almak için bir getter'ım var.

Şimdi shares= adlı ve obligations= adlı 2 kurabiyem var.

Bu getter'ı yalnızca yükümlülükler çerezinden değerleri almak için yapmak istiyorum.

Bunu nasıl yapabilirim? Yani for, verileri ayrı değerler halinde böler ve bir diziye koyar.

 function getCookie1() {
    // What do I have to add here to look only in the "obligations=" cookie? 
    // Because now it searches all the cookies.

    var elements = document.cookie.split('=');
    var obligations= elements[1].split('%');
    for (var i = 0; i < obligations.length - 1; i++) {
        var tmp = obligations[i].split('$');
        addProduct1(tmp[0], tmp[1], tmp[2], tmp[3]);
    }
 }

Cevap #1

Bir dizi üzerinde tekrarlamaktan kaçınan bir yaklaşım şöyle olurdu:

function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

Yürüyüş Rehberi

Bir dizeyi belirli bir belirtece göre bölmek, eğer belirteç dizede yoksa bir dize içeren bir dizi (aynı değer) veya belirteç dizede bulunursa iki dize içeren bir dizi oluşturur.

İlk (sol) öğe, token'dan önce olanın dizisidir ve ikinci (sağ) olan ise token'dan sonra olanın dizisidir.

(NOT: Eğer dize bir token ile başlıyorsa, ilk eleman boş bir stringtir)

Çerezlerin aşağıdaki şekilde saklandığı göz önünde bulundurulduğunda:

"{name}={value}; {name}={value}; ..."

Belirli bir çerez değerini almak için, sadece "; {name}=" ‘den sonra ve bir sonraki ";" ‘den önce olan stringi almamız gerekir. Herhangi bir işlem yapmadan önce, çerezler stringinin başına "; " ekleriz, böylece ilk çerez dahil olmak üzere her çerez ismi "; " ve "=" ile çevrelenmiş olur:

"; {name}={value}; {name}={value}; ..."

Şimdi, önce "; {name}=" ile bölebiliriz ve eğer token bir cookie stringinde bulunursa (yani iki öğemiz varsa), ikinci öğe cookie değerimizle başlayan bir string olacaktır. Sonra bunu bir diziden çıkarırız (yani pop), ve aynı işlemi tekrar ederiz, ama bu sefer ";" token olarak kullanılır, ancak bu sefer solundaki stringi çıkarırız (yani shift) ve gerçek token değerini elde ederiz.

Cevap #2

Çerez üzerinde tek bir düzenli ifade eşleşmesi kullanmayı tercih ederim:

window.getCookie = function(name) {
  var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
  if (match) return match[2];
}

VEYA Ayrıca bunu bir fonksiyon olarak kullanabiliyoruz, aşağıdaki koda bakın.

function getCookieValue(name) 
    {
      const regex = new RegExp(`(^| )${name}=([^;]+)`)
      const match = document.cookie.match(regex)
      if (match) {
        return match[2]
      }
   }

Yorumlarda Scott Jungwirth sayesinde geliştirildi.

Cevap #3

Düzenli ifade kullanan bazı diğer cevaplardaki yöntemler tüm durumları kapsamaz, özellikle:

  1. Kurabiye son kurabiye olduğunda. Bu durumda kurabiye değerinden sonra noktalı virgül olmayacaktır.
  2. Başka bir çerez adı, aranan adla bitiyorsa. Örneğin, "one" adlı çerezi arıyorsunuz ve "done" adlı bir çerez var.
  3. Kurabiye adı, bir düzenli ifadede kullanıldığında kendisi olarak yorumlanmayan karakterler içeriyorsa, bu karakterlerden önce bir ters eğik çizgi konmadıkça.

Aşağıdaki yöntem bu durumları ele alır:

function getCookie(name) {
    function escape(s) { return s.replace(/([.*+?\^$(){}|\[\]\/\\])/g, '\\$1'); }
    var match = document.cookie.match(RegExp('(?:^|;\\s*)' + escape(name) + '=([^;]*)'));
    return match ? match[1] : null;
}

Bu, çerez bulunamazsa null döndürecektir. Çerezin değeri boşsa boş bir string döndürecektir.

Notlar :

  1. Bu fonksiyon, çerez adlarının büyük/küçük harf duyarlı olduğunu varsayar.
  2. document.cookie - Bu, bir atamanın sağ tarafında göründüğünde, birbirinden noktalı virgülle ayrılmış çerezlerin bir listesini içeren bir dizeyi temsil eder; çerezler ise name=value çiftleridir. Her noktalı virgülden sonra tek bir boşluk olduğu görülmektedir.
  3. String.prototype.match() - Eşleşme bulunamadığında null döner. Eşleşme bulunduğunda bir dizi döner ve [1] indeksindeki eleman ilk eşleşen grubun değeri olur.

Düzenli İfade Notları:

  1. (?:xxxx) - eşleşmeyen bir grup oluşturur.
  2. ^ - dizenin başlangıcıyla eşleşir.
  3. | - grubun alternatif desenlerini ayırır.
  4. ;\\s* - sıfır veya daha fazla boşluk karakteri izleyen bir noktalı virgülle eşleşir.
  5. = - bir eşittir işaretine uyar.
  6. (xxxx) - eşleşen bir grup oluşturur.
  7. [^;]* - noktalı virgül olmayan sıfır veya daha fazla karakterle eşleşir. Bu, noktalı virgüle kadar olan karakterlerle veya dizenin sonuna kadar olan karakterlerle eşleşeceği anlamına gelir.

Cevap #4

İşte herhangi bir ek kütüphaneye ihtiyaç duymadan belirli bir isimdeki çerez değerini almak için tek satırlık bir kod:

const value = ('; '+document.cookie).split(`; COOKIE_NAME=`).pop().split(';')[0];

Bu cevap kirlich'in mükemmel çözümüne dayanmaktadır. Bu çözümün tek uzlaşma noktası, çerez mevcut olmadığında boş bir dize almanızdır. Çoğu durumda bu, bir engel teşkil etmemelidir.

Cevap #5

Eğer jQuery kullanıyorsanız bu eklentiyi kullanmanızı tavsiye ederim:

https://github.com/carhartl/jquery-cookie
https://github.com/carhartl/jquery-cookie/blob/master/jquery.cookie.js

<script type="text/javascript"
 src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js">

Yani çerezi şöyle okuyabilirsiniz:

var value = $.cookie("obligations");

Ayrıca çerez yazabilirsiniz:

$.cookie('obligations', 'new_value');
$.cookie('obligations', 'new_value', { expires: 14, path: '/' });

Çerezi sil:

$.removeCookie('obligations');

Cevap #6

4 yıl sonra, ES6 ile çok daha basit bir versiyon.

function getCookie(name) {
  let cookie = {};
  document.cookie.split(';').forEach(function(el) {
    let split = el.split('=');
    cookie[split[0].trim()] = split.slice(1).join("=");
  })
  return cookie[name];
}

Ayrıca bunu bir Cookie nesnesi olarak kullanmak için bir gist de oluşturdum. Örneğin, Cookie.set(name,value) ve Cookie.get(name)

Bu, taramak yerine tüm çerezleri okur. Az sayıda çerez için sorun değil.

Cevap #7

Çerezi JavaScript Nesnesine veya Haritasına dönüştürmek için tek satır

Object.fromEntries(document.cookie.split('; ').map(v=>v.split(/=(.*)/s).map(decodeURIComponent)))

new Map(document.cookie.split('; ').map(v=>v.split(/=(.*)/s).map(decodeURIComponent)))

Cevap #8

JavaScript çerezlerini almak ve ayarlamak için js-cookie kütüphanesini kullanabilirsiniz.

HTML'inize ekleyin:

<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>

Bir Çerez oluşturmak için:

Cookies.set('name', 'value');

Bir Çerezi okumak için:

Cookies.get('name'); // => 'value'

Cevap #9

Burada Jonathan'ın sağladığı fonksiyonu değiştirdim, düzenli ifade kullanarak bir çerez değerini ismiyle böyle alabilirsiniz:

function getCookie(name){
    var pattern = RegExp(name + "=.[^;]*")
    var matched = document.cookie.match(pattern)
    if(matched){
        var cookie = matched[0].split('=')
        return cookie[1]
    }
    return false
}

Eğer boş bir dize dönerse bu, çerezin mevcut olduğu ama bir değere sahip olmadığı anlamına gelir; eğer false dönerse çerez mevcut değildir. Umarım bu yardımcı olur.

Cevap #10

Basit bir yol :)

const cookieObj = new URLSearchParams(document.cookie.replaceAll("&", "%26").replaceAll("; ","&"))
cookieObj.get("your-cookie-name")

Cevap #11

Anahtarıyla değeri kurabiye almak için tek lineer fonksiyonum.

cookie = key=>((new RegExp((key || '=')+'=(.*?); ','gm')).exec(document.cookie+'; ') ||['',null])[1]

Çerez fonksiyonunu şöyle çağır

cookie('some-key')

Cevap #12

İşte oldukça kısa bir versiyon

 function getCookie(n) {
    let a = `; ${document.cookie}`.match(`;\\s*${n}=([^;]+)`);
    return a ? a[1] : '';
}

Regex ifadesini oluşturmak için ES6'nın şablon dizelerini kullandığımı unutmayın.

Cevap #13

Biliyorum, bu eski bir soru ama ben de bu sorunla karşılaştım. Kayda geçirmek için, geliştiriciler Mozilla web sayfasında küçük bir API var.

Sadece JS kullanarak herhangi bir çerezi adına göre alabilirsiniz. Bana kalırsa kod da daha temiz (uzun satır dışında, eminim bunu kolayca düzeltebilirsiniz).

function getCookie(sKey) {
    if (!sKey) { return null; }
    return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
}

Yorumlarda belirtildiği gibi, bu yöntemin anahtarın ve değerin encodeURIComponent() kullanılarak kodlandığını varsaydığını unutmayın. Çerezin anahtarı ve değeri kodlanmadıysa decode & encodeURIComponent()’ı kaldırın.

Cevap #14

function getCookie(name) {
    var pair = document.cookie.split('; ').find(x => x.startsWith(name+'='));
    if (pair)
       return pair.split('=')[1]
}

İlgili makaleler