Çerezlere Giriş: JavaScript Çerezlerini Anlamak ve Kullanmak

Preslav Dobrev2022-10-25 · 7 min read

Çerezlere Giriş: JavaScript Çerezlerini Anlamak ve Kullanmak

Tarayıcı çerezleri veya HTTP çerezleri, küçük veri parçalarından oluşan metin dosyalarıdır. Web siteleri bu bilgileri bir kullanıcı’nın yolculuğunu takip etmek için kullanır, bu da onlara özel olarak uyarlanmış özellikler sunmalarına ve gezinme deneyimlerini iyileştirmelerine olanak tanır. Çerezler 4096 bayta kadar veri depolayabilir. Ancak, tarayıcıya bağlı olarak alan adı başına sınırlı sayıda çerez ekleyebiliriz.

İster sadece eğlence için geziniyor olun ister geçiminizi bundan sağlıyor olun, HTTP çerezleri hakkında temel bir anlayışa sahip olmak her internet kullanıcısı için gereklidir. Bu kılavuz, çerezleri ve çeşitli türlerini ayrıntılı olarak tanıtacaktır. Odak noktamız, JavaScript Çerezlerini anlamanıza ve onlarla çalışmanıza yardımcı olmaktır.

Hadi başlayalım!

Gereksinimler

Bu öğreticiyi takip etmek için şunlara sahip olmalısınız:

Temel bir JavaScript bilgisi.

JavaScript Çerezleri ile Başlarken

Çalışmak JavaScript çerezleri ile oldukça kolaydır. Çerezleri zahmetsizce oluşturmaya, düzenlemeye ve geri almaya olanak tanır. Ayrıca, ad, değer ve uzunluk gibi çerez özelliklerini değiştirmek ve kısıtlamak için Document nesnesi’nin cookie özelliğini kullanabiliriz.

Çerez Türleri

İlk olarak, farklı çerez türlerine bir göz atalım:

Birinci Taraf Çerezler

Bu çerezler, bir kullanıcı bir web sitesini her ziyaret ettiğinde oluşturulur ve saklanır. Web sitesi sahiplerinin kullanıcılar’ın verileri hakkında ayrıntılı bilgi edinmelerini ve onlara daha iyi bir gezinme deneyimi sunmalarını sağlar.

Kalıcı Çerezler

Bu tür çerezler için, tanımlayıcı bir son kullanma tarihi atar. Bu nedenle çok daha uzun bir süre kullanılırlar. Bu, tarayıcınızı kapatsanız bile çerezin tarayıcıda kalacağı anlamına gelir. Ayrıca, çerezi oluşturan web sitesini her ziyaret ettiğinizde veriler tanımlayıcıya geri gönderilir.

Oturum Çerezleri

Bu çerezler yalnızca geçicidir ve tarayıcınız açık olduğu sürece tarayıcınızın belleğinde saklanır. Tarayıcıyı kapattığınızda çerez tarayıcınızın geçmişinden silinir, bu da onları daha düşük bir güvenlik riski haline getirir. Bir son kullanma tarihi belirtmeniz gerekmez.

Üçüncü Taraf Çerezler

Üçüncü taraf çerezler, şu anda ziyaret etmediğiniz bir site tarafından oluşturulur. Çoğunlukla bu çerezler, bir reklama tıklayan bir kullanıcıyı izlemede ve onları kendilerini yönlendiren alan adıyla ilişkilendirmede yardımcı olur.

Çerez Oluşturma

İki yöntem kullanarak çerez oluşturabiliriz:

Şunu gönderin: Set-Cookie , HTTP yanıt başlığında. Web sunucusu için kullanılan teknolojilere bağlı olarak, araçları ve kitaplıkları kullanarak çerez başlıklarını yönetebilirsiniz. Çerezler, son kullanma tarihi gibi bilgileri ve secure yönergesi ile HttpOnly bayrağı gibi güvenlik özelliklerini içerebilir.

HttpOnly: Tarayıcının çerezleri okuyamayacağını veya değiştiremeyeceğini belirtir.
Secure: Bu, çerezin yalnızca HTTPS üzerinden gönderilebileceğini belirtir.

JavaScript document.cookie özelliğini kullanarak çerezler oluşturabilir, okuyabilir ve silebiliriz.

Adım 1 — Çerez Oluşturma

Sırada, bir JavaScript çerezi oluşturma sürecini göstereceğiz. Çerezler, ad-değer çifti biçiminde kaydedilir:

document.cookie = "UserName = CloudSigma";

1	document.cookie = "UserName = CloudSigma";

Yukarıdaki çerezde, UserName çerezin adı iken, CloudSigma içinde saklanan değerdir.

Çerezin bir son kullanma tarihi vardır. Varsayılan olarak, tarayıcı kapatıldığında otomatik olarak silinir. Çerezinize bir son kullanma tarihi de ekleyebilirsiniz:

document.cookie = "UserName = CloudSigma"; 
expires=Fri, 11 Jun 2022 12:00:00 UTC";
document.cookie = "UserName = CloudSigma";

document.cookie = "UserName = CloudSigma";

expires=Fri, 11 Jun 2022 12:00:00 UTC";

document.cookie = "UserName = CloudSigma";

Varsayılan olarak çerezler geçerli sayfaya aittir. Ancak, çerezi path parametresi yardımıyla da belirtebiliriz:

document.cookie = "UserName = CloudSigma"; 
expires=Fri, 11 Jun 2022 12:00:00 UTC; path=/";

1 2	document.cookie = "UserName = CloudSigma"; expires=Fri, 11 Jun 2022 12:00:00 UTC; path=/";

Cookie Max-Age ve Cookie Expire Karşılaştırması

İhtiyaçlarınıza bağlı olarak, bir çerezin son kullanma tarihini ayarlamak için bu iki stratejiyi kullanabilirsiniz. İkisi arasındaki fark, expires bir çerezin ne zaman silineceğine dair bir son kullanma tarihi belirler. Aksine, max-Age, bir çerezin silineceği süreyi saniye cinsinden ayarlar. Ne yazık ki, max-age tüm tarayıcılar tarafından desteklenmez.

Şu öznitelikleri kullanarak çerez ayarlama örneği: expires ve max-age:

Expires:

var d = new Date();
d.setTime(d.getTime() + 5*60*1000); // milisaniye cinsinden
document.cookie = 'foo=bar;path=/;expires='+d.toGMTString()+';';

var d = new Date();

d.setTime(d.getTime() + 5*60*1000); // milisaniye cinsinden

document.cookie = 'foo=bar;path=/;expires='+d.toGMTString()+';';

Max-age :

document.cookie = 'foo=bar;path=/;max-age='+5*60+';';

1	document.cookie = 'foo=bar;path=/;max-age='+5*60+';';

Adım 2 — Çerez Okuma

The document.cookie özniteliği bir dize döndürür. İki veya daha fazla çerez varsa, bunları ayırmak için noktalı virgül ( ;) ve boşluk kullanırız.

Bir çerez listesinden tek bir çerezi çıkarmak için split() yöntemini kullanırız. Bu yöntem, listeyi tek tek ad ve değer çiftlerine ayırır. Bu işlem tamamlandıktan sonra okumak istediğiniz hedef çerezi arayabilirsiniz:

function setCookie(name, count, validityCheck) {
    var cookie = name + "=" + encodeURIComponent(value);
    if(typeof validityCheck === "number") {
        cookie += "; max-age=" + (validityCheck*24*60*60);
        document.cookie = cookie;
    }
}

function getCookie(name) {
    var cookieArr = document.cookie.split(";");
    for(var i = 0; i < cookieArr.length; i++) {
    var cookiePair = cookieArr[i].split("=");
    if(name == cookiePair[0].trim()) {
        return decodeURIComponent(cookiePair[1]);
    }
}
    return null;
}

function checkCookie() {
    var UserName = getCookie("UserName");
    if(UserName != "") {
    alert("Tekrar hoş geldiniz, " + UserName);
} else {
    firstName = prompt("Kullanıcı adınızı girin:");
        if(UserName != "" && UserName != null) {
            setCookie("UserName", UserName, 30);
        }
    }
}

function setCookie(name, count, validityCheck) {

var cookie = name + "=" + encodeURIComponent(value);

if(typeof validityCheck === "number") {

cookie += "; max-age=" + (validityCheck*24*60*60);

document.cookie = cookie;

}

function getCookie(name) {

var cookieArr = document.cookie.split(";");

for(var i = 0; i < cookieArr.length; i++) {

var cookiePair = cookieArr[i].split("=");

if(name == cookiePair[0].trim()) {

return decodeURIComponent(cookiePair[1]);

}

return null;

}

function checkCookie() {

var UserName = getCookie("UserName");

if(UserName != "") {

alert("Tekrar hoş geldiniz, " + UserName);

} else {

firstName = prompt("Kullanıcı adınızı girin:");

if(UserName != "" && UserName != null) {

setCookie("UserName", UserName, 30);

}

Kodda oluşturduğumuz fonksiyonları anlayalım:

Fonksiyon Adı	Açıklama
setCookie()	Bir çerez oluşturur
getCookie()	Çerezin değerini okur
checkCookie()	Verifies whether the UserName değerinin ayarlanıp ayarlanmadığını doğrular.

Bir sonraki adımda, bir çerezin nasıl güncelleneceğini öğreneceğiz.

Adım 3 — Çerez Güncelleme

Çerez özniteliklerimize yeni değerler atayabiliriz. Örneğimizde, kullanıcının aboneliğini aylık plandan üç aylık plana güncelleyelim.

Let’s update the max-age özniteliğini UserName çerezinde 30 günden 180 güne güncelleyelim:

document.cookie = "UserName=CloudSigma; path=/; max-age=" + 30 * 24 * 60 * 60;
document.cookie = "UserName=CloudSigma; path=/; max-age=" + 90 * 24 * 60 * 60;

1 2	document.cookie = "UserName=CloudSigma; path=/; max-age=" + 30 * 24 * 60 * 60; document.cookie = "UserName=CloudSigma; path=/; max-age=" + 90 * 24 * 60 * 60;

Adım 4 — Çerez Silme

Çerezi aynı adla yeniden tanımlamak, silmek istediğiniz çerezi silecektir. Bir çerezi, max-age özniteliğini şu şekilde ayarlayarak silebiliriz: 0:

document.cookie = "UserName=; max-age=0";

1	document.cookie = "UserName=; max-age=0";

Ayrıca, çerezin belirtilmiş bir yolu varsa, bunu belirterek silin:

document.cookie = "Username = ExcellentDesign; Path = /";

1	document.cookie = "Username = ExcellentDesign; Path = /";

Sonuç

Çerezler, bir web sitesinin düzgün çalışması ve işlev görmesi için gereklidir. Bu giriş kılavuzunda, çerezleri ve farklı türlerini ayrıntılı olarak ele aldık. Ayrıca, bir örnek yardımıyla çerezlerle çalışmayı öğrendik. Artık JavaScript çerezlerini kullanma konusunda rahat olduğunuza göre, konu hakkında daha fazla bilgi edinmek ve keşfetmek için özelleştirilmiş çerezler oluşturmaya başlayın.

Ayrıca, JavaScript ve web geliştirme üzerine olan ve şuradan keşfedebileceğiniz birçok eğitim bulunmaktadır: blog:

Keyifli Kodlamalar!

Preslav Dobrev

Yazar · CloudSigma

Preslav Dobrev, CloudSigma'da Kreatif Tasarımcı olarak görev yapmakta olup geleneksel ve yenilikçi pazarlama kanallarını kullanarak tutarlı bir kurumsal kimlik oluşturmaya odaklanmaktadır. Sanatsal vizyonu stratejik pazarlamayla harmanlayarak etkili marka anlatıları oluşturma konusunda oldukça yeteneklidir.