jQuery ile Cookie (Çerez) Yönetimi – jquery.cookie

Bu makalede jquery ile kolayca nasıl cookie oluşturulur, cookie silme işlemi nasıl yapılır, belli gün aralıklarında kullanıcı tarayıcısında çerez nasıl saklanır, saklanan cookie’lerin yönetimi ve kontrolü nasıl yapılabilir sorularına yanıt bulacaksınız.

Öncelikle cookie(çerez) ne işe yarar, niçin kullanılır, bu sorulara cevap verelim.

Yazılımsal olarak oluşturulan çerezler kullanıcıların sistemlerinde geçici olarak saklanan, veri kaydetmeye ve korumaya yarayan geçici veri merkezleridir. En yalın haliyle böyle anlatılabilir diye düşünüyorum. Sonrasında bu çerezler okunur, böylece kullanıcı yönetimi, yada saklanan veri yönetimi kolayca yapılabilir.

Geçtiğimiz günlerde cookie işlemlerinin yönetimini kolayca yapabileceğim bir kütüphane arayışına giriştim. Birkaç denemeden sonra, oldukça yalın şekilde sınıflandırılmış bir kütüphane olduğunu keşfettim. Şimdi sizlerle bu kütüphaneyi paylaşacağım, cookie yönetiminin nasıl yapıldığını göstereceğim.

Kütüphanenin github sayfasına buradan ulaşabilirsiniz.

Kullanımı:

Öncelikle script’i edinerek sayfa içerisine import edelim. Tabi jQuery import’tan hemen sonra olmalı.

<script src="/path/to/jquery.cookie.js"></script>

*Basit cookie oluşturmak:

$.cookie('name', 'value');

*15 gün saklanan bir cookie oluşturmak

$.cookie('name', 'value', { expires: 15 });

*Cookie okumak

$.cookie('name'); // => "value"

*Cookie silmek

// Returns true when cookie was successfully deleted, otherwise false
$.removeCookie('name'); // => true

jquery.cookie ile cookie yönetimi yapmak işte bu kadar kolay. Şimdi aşağıda örnek bir uygulama yazacağım. Buna göre kullanıcıya sadece 1 kere göstermek istediğimiz bir yazı var diye farz edelim. Yani tekrar tekrar gösterilmeyecek. Bunun kontrolünü nasıl yapabileceğimiz aşağıdaki bonus örneğimizde mevcut. Bir sonraki makalemizde görüşmek üzere. Kötülerden uzak geçsin gününüz. Kolaylıklar dilerim.

Bonus Uygulama

if (!$.cookie('popup-shown')) {
      //Burada pop-up içerisinde göstermek istediğimiz mesajımız olsun.
      $.magnificPopup.open({
        items: [
            {
                src: '#disclaimer', 
                type: 'inline'
            }
        ],
        removalDelay: 300,
        mainClass: 'mfp-fade',
        closeOnContentClick: false,
        modal: true
    });
    //Tarayıcıya cookie tanımlayalım ki tekrardan gösterilmesin.
    $.cookie('popup-shown', true);
}