JavaScript Çerezler

Yazıda JavaScript çerez oluşturma, okuma ve JavaScript çerezlerinin kullanımı ile ilgili bilgileri yer almaktadır.

Çerez nedir?

Çerez siteye giren kullanıcıların tarayıcılarında çeşitli bilgileri saklamak için kullanılan depolama alanıdır.

Çerezler bilgileri belirli bir süre saklamak için kullanılır.

Çerezler kullanıcının tarayıcısında saklandığı için sadece çerez bulunan kullanıcıya özel işlemler yapılabilir.

Çerez oluşturma

JavaScript ile çerez oluşturmak için document nesnesi kullanılır.

<script>
"use strict";
  document.cookie = "adi = 'Yusuf SEZER' ";
</script>

Çerez oluşturma örneğinde adi isimli çerez oluşturulmuş ve değerine Yusuf SEZER atanmıştır.

Çerezlerin ne kadar zaman tarayıcıda saklanacağınıda belirleyebiliriz.

<script>
"use strict";
  document.cookie = "adi = 'Yusuf SEZER'; expires = Mon, 1 Jan 2100 00:00:00 GMT";
</script>

Çerezlerin tarayıcıda kalma tarihini belirlerken, geçmiş bir tarih kullanılırsa çerez oluşturulup silinecektir.

Çerezlerin içeriği değiştirilebilir.

<script>
"use strict";
  document.cookie = "adi = 'Mehmet SEZER'";
</script>

Artık adi isimli değişenin değeri Mehmet SEZER oldu.

Çerezler kolayca değiştirilebildiği için çokça güvenlik açığı mevcuttur.

Çerez kullanımı ihtiyaç olmadığı durumlarda kullanılması pek tavsiye edilmez.

Çerezleri silmek için özel bir fonksiyon yoktur.

Çerezleri silmek için çerezlerin son kullanma tarihini geçmiş bir tarih vermemiz yeterli olacaktır.

<script>
"use strict";
  document.cookie = "adi = 'Yusuf SEZER'; expires = Mon, 1 Jan 2100 00:00:00 GMT";  // Çerez oluşturuldu
  document.cookie = "adi = 'Yusuf SEZER'; expires = Mon, 1 Jan 2000 00:00:00 GMT";  // Çerez silindi
</script>

Çerez silerken çerez değerine bir şeylerin yazılması veya yazılmaması sonucu değiştirmeyecektir.

Çerez bilgilerini okumak için yine aynı yöntem kullanılır.

Ancak bu sefer cookie değeri herhangi birşeye eşitlenmez.

<script>
"use strict";
  document.cookie = "adi = 'Yusuf SEZER'; expires = Mon, 1 Jan 2100 00:00:00 GMT";
  alert(document.cookie);
</script>

Ancak cookie değeri tarayıcıda bulunan tüm çerezlerin bilgisini metin veri türü (string) olarak bize verecektir.

Metin veri türü içerisinde çeşitli bölme işlemleri yapılarak istenilen çerez ismine ait bilgi okunabilir.

Bu işlemler için aşağıda yazılmış ve kullanımı kolay olan setCookie ve getCookie isimli iki fonksiyonu kullanabiliriz

<script>
"use strict";
  function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
  }

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

  setCookie("adi", "Yusuf SEZER", 10);
  var deger = getCookie("adi");
  alert(deger);
</script>

Yazılmış fonksiyonlardan setCookie çerez oluşturmak için çerez adı, çerez değeri ve kaç gün tarayıcıda duracağı bilgilerini parametre olarak alır getCookie fonksiyonu parametre olarak çerez adını alır ve o çereze ait bilgileri bize verir.

Örnek uygulama aşağıda yer almaktadır.

<script>
"use strict";
  function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
  }

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

  var deger = getCookie("sayac");
  if (deger != "") {
    document.write(deger + " kere okundu");
    deger = parseInt(deger) + 1;
    setCookie("sayac", deger, 10);
  } else {
    setCookie("sayac", 1, 10);
  }
</script>

Örnek uygulamada sayfa ilk defa açıldığında bir çerez oluşturulacak, sonraki girişlerde çerez içerisindeki değer okunarak her girişte kaç defa okunduğu bilgisi ekrana yazdırılacaktır.

Hayırlı günler dilerim.