JavaScript Çerezler

Cookie, web sayfalarında kullanıcı bilgilerini saklamanızı sağlar.

Cookie nedir?

Cookie, bilgisayarınızda küçük metin dosyalarında saklanan verilerdir.

Web sunucusu web sayfasını tarayıcıya gönderdikten sonra bağlantı kapatıldığında, sunucu kullanıcının her şeyini unutur.

Cookie, "kullanıcı bilgilerini nasıl hatırlamak" sorunu için icat edilmiştir:

  • Kullanıcı bir web sayfasını ziyaret ettiğinde, adı cookie'ye kaydedilebilir.
  • Kullanıcı bir daha bu sayfayı ziyaret ettiğinde, cookie adını hatırlar.

Cookie, ad-değer çiftlerinde saklanır, örneğin:

username = Bill Gates

Tarayıcı sunucudan bir web sayfası istediğinde, o sayfanın cookie'leri bu istekte eklenir. Böylece sunucu, kullanıcı bilgilerini "hatırlamak" için gerekli verileri elde eder.

Eğer tarayıcı yerel cookie desteğini kapatmışsa, aşağıdaki örnekler çalışmaz.

Cookie oluşturmak için JavaScript

JavaScript document.cookie Cookie'yi oluşturma, okuma, silme özellikleri.

Cookie oluşturmak için JavaScript kullanabilirsiniz:

document.cookie = "username=Bill Gates";

UTC zamanında geçerli tarih ekleyebilirsiniz. Standart olarak, tarayıcı kapatıldığında cookie silinir:

document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC";

JavaScript kullanarak path Parametreleri, tarayıcıya cookie'nin hangi yola ait olduğunu söyleyebilirsiniz. Varsayılan olarak, cookie mevcut sayfaya aittir.

document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

JavaScript ile cookie okumak

JavaScript ile cookie okumak için şu şekilde yapabilirsiniz:

var x = document.cookie;

document.cookie Tüm cookie'leri bir satırda döndürebilir, örneğin: cookie1=value; cookie2=value; cookie3=value;

JavaScript ile cookie değiştirmek

JavaScript kullanarak, cookie'yi oluşturduğunuz gibi değiştirebilirsiniz:

document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

Eski cookie覆盖.

JavaScript ile cookie silmek

Cookie silmek çok basittir.

Cookie silerken cookie değeri belirtmek zorunda değilsiniz:

Doğrudan expires Geçmiş bir tarihe parametre ayarlayarak:

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

Kaldıracağınız doğru cookie'yi belirlemek için cookie yolunu tanımlamalısınız.

Yol belirtmezseniz, bazı tarayıcılar cookie'nizi sizi silemez.

Cookie stringi

document.cookie Özellikler normal bir metin dizesi gibi görünüyor. Ancak, bu böyle değil.

Size dilediğiniz kadar document.cookie Tam bir cookie stringi yazdığınızda, yeniden okuduğunuzda sadece adı-değer çiftini görebilirsiniz.

Yeni bir cookie ayarlandığında, eski cookie覆盖不会被。Yeni Cookie document.cookie e eklenir, bu yüzden document.cookie okuduğunuzda alacağınız şey şu şekilde olacaktır:

cookie1 = value; cookie2 = value;
　 　 　

Belirli bir cookie'nin değerini bulmak istiyorsanız, cookie dizgisinde cookie değerini arayan bir JavaScript fonksiyonu yazmanız gerekir.

JavaScript Cookie Örneği

Aşağıdaki örnekte, ziyaretçinin adını saklayacak bir cookie oluşturacağız.

Ziyaretçi ilk kez web sayfasına geldiğinde, adını doldurmasını isteyeceğiz. Daha sonra bu adı cookie'ye saklayacağız.

Sonraki ziyaretçi aynı sayfaya geldiğinde, hoş geldin mesajı alacak.

Örneğin, 3 tane JavaScript fonksiyonu oluşturacağız:

  1. Cookie değeri ayarlama fonksiyonu
  2. Cookie değeri almanın fonksiyonu
  3. Cookie değerini kontrol eden fonksiyon

Cookie ayarlama fonksiyonu

Öncelikle, ziyaretçinin adını cookie değişkenine saklayacak bir fonksiyon oluşturuyoruz:

örnek

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

Örnek açıklaması:

Bu fonksiyonun parametreleri: cookie adı (cname), cookie değeri (cvalue) ve cookie'nin süresi dolma günleri (exdays).

Cookie adı, cookie değeri ve süresi dolma dizesini birleştirerek bu fonksiyon cookie'yi ayarlar.

Cookie'nin alınması fonksiyonu

Ardından, belirli bir cookie'nin değerini döndüren bir fonksiyon oluşturuyoruz:

örnek

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

Fonksiyon açıklaması:

Cookie'yi parametre olarak (cname) geçirin.

Aranan metni içeren değişkeni (name) oluşturun (CNAME”=”).

Cookie dizgisini çözümleyin, özel karakter içeren cookie'leri işleyin, örneğin “$”.

document.cookie'yi adı ca olan bir diziye (decodedCookie.split(';')) noktalı virgülle ayır.

ca dizisini (i = 0; i < ca.length; i++) dolaş (her değeri c = ca[i]) oku.

cookie bulunursa (c.indexOf(name) == 0), o cookie'nin değeri (c.substring(name.length, c.length)) döndürülür.

cookie bulunamadıysa, "" döndürülür.

cookie kontrol fonksiyonu

Son olarak, cookie'nin ayarlanıp ayarlanmadığını kontrol eden bir fonksiyon oluştururuz.

cookie ayarlanmışsa, bir selamlama görüntülenir.

cookie ayarlanmamışsa, kullanıcı adını sorgulayan bir pencere görüntülenir ve kullanıcı adı cookie 365 gün boyunca saklanır, setCookie fonksiyon:

örnek

function checkCookie() {
    var username = getCookie("username");
    if (username != "") {
        alert("Welcome again " + username);
    }
        username = prompt("Please enter your name:", "");
        if (username != "" && username != null) {
            setCookie("username", username, 365);
        }
    }
}

şimdi birleştir

örnek

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=/";
}
function getCookie(cname) {
    var name = cname + "=";
    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);
         }
        if (c.indexOf(name)  == 0) {
            return c.substring(name.length, c.length);
         }
    }
    return "";
}
function checkCookie() {
    var user = getCookie("username");
    if (user != "") {
        alert("Yeniden hoş geldiniz " + user);
    }
        user = prompt("Lütfen adınızı girin:", "");
        if (user != "" && user != null) {
            setCookie("username", user, 365);
        }
    }
}

Kişisel Deneyim

Üstteki örnekler sayfa yüklenirken checkCookie() fonksiyonunu çalıştırır.