JavaScript Çerezleri
Çerezler, kullanıcı bilgilerini web sayfalarında saklamanıza izin verir.
Çerezler nedir?
Çerezler, bilgisayarınızda küçük metin dosyalarında saklanan verilerdir.
Bir web sunucusu bir tarayıcıya bir web sayfası gönderdiğinde, bağlantı kapatılır ve sunucu kullanıcı hakkında her şeyi unutur.
Çerezler, "kullanıcı hakkındaki bilgilerin nasıl hatırlanacağı" sorununu çözmek için icat edildi:
- Bir kullanıcı bir web sayfasını ziyaret ettiğinde, adı bir çerezde saklanabilir.
- Kullanıcı sayfayı bir sonraki ziyaretinde, çerez onun adını "hatırlar".
Çerezler, aşağıdaki gibi ad-değer çiftlerine kaydedilir:
username = John Doe
Bir tarayıcı, bir sunucudan bir web sayfası istediğinde, sayfaya ait çerezler talebe eklenir. Bu şekilde sunucu, kullanıcılar hakkındaki bilgileri "hatırlamak" için gerekli verileri alır.
Tarayıcınızda yerel tanımlama bilgisi desteği kapalıysa, aşağıdaki örneklerin hiçbiri çalışmayacaktır.
JavaScript ile Çerez Oluşturun
document.cookie
JavaScript, bu özellik ile çerezler oluşturabilir, okuyabilir ve silebilir .
JavaScript ile şu şekilde bir çerez oluşturulabilir:
document.cookie = "username=John Doe";
Ayrıca bir son kullanma tarihi de ekleyebilirsiniz (UTC saatinde). Varsayılan olarak, tarayıcı kapatıldığında çerez silinir:
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";
Bir yol parametresi ile tarayıcıya çerezin hangi yola ait olduğunu söyleyebilirsiniz. Varsayılan olarak, çerez geçerli sayfaya aittir.
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
JavaScript ile Çerez Oku
JavaScript ile çerezler şu şekilde okunabilir:
let x = document.cookie;
document.cookietüm çerezleri tek bir dizgede döndürür: cookie1=value; cookie2=değer; cookie3=değer;
JavaScript ile Çerez Değiştirme
JavaScript ile, bir tanımlama bilgisini, onu oluşturduğunuz şekilde değiştirebilirsiniz:
document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
Eski çerezin üzerine yazılır.
JavaScript ile Çerez Silme
Bir çerezi silmek çok basittir.
Bir tanımlama bilgisini sildiğinizde bir tanımlama bilgisi değeri belirtmeniz gerekmez.
Sadece sona erme parametresini geçmiş bir tarihe ayarlayın:
document.cookie = "username=; expires=Thu, 01
Jan 1970 00:00:00 UTC; path=/;";
Doğru çerezi sildiğinizden emin olmak için çerez yolunu tanımlamanız gerekir.
Yolu belirtmezseniz bazı tarayıcılar bir çerezi silmenize izin vermez.
Çerez Dizisi
Özellik document.cookienormal bir metin dizesi gibi görünüyor. Ama öyle değil.
Document.cookie'ye tam bir cookie string yazsanız bile, tekrar okuduğunuz zaman sadece isim-değer çiftini görebilirsiniz.
Yeni bir tanımlama bilgisi ayarlarsanız, eski tanımlama bilgilerinin üzerine yazılmaz. Yeni tanımlama bilgisi document.cookie'ye eklenir, bu nedenle document.cookie'yi tekrar okursanız şöyle bir şey elde edersiniz:
cookie1 = değer; cookie2 = değer;
Belirtilen bir tanımlama bilgisinin değerini bulmak istiyorsanız, tanımlama bilgisi dizesinde tanımlama bilgisi değerini arayan bir JavaScript işlevi yazmalısınız.
JavaScript Çerez Örneği
Aşağıdaki örnekte, bir ziyaretçinin adını saklayan bir çerez oluşturacağız.
Bir ziyaretçi web sayfasına ilk geldiğinde, adını girmesi istenecektir. Ad daha sonra bir çerezde saklanır.
Ziyaretçi aynı sayfaya bir daha geldiğinde bir karşılama mesajı alacaktır.
Örnek için 3 JavaScript işlevi oluşturacağız:
- Çerez değeri ayarlamak için bir işlev
- Çerez değeri elde etmek için bir işlev
- Bir tanımlama bilgisi değerini kontrol etme işlevi
Bir Çerez Ayarlama İşlevi
İlk functionolarak, ziyaretçinin adını bir çerez değişkeninde saklayan bir a oluşturuyoruz:
Örnek
function setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
let expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
Örnek açıkladı:
Yukarıdaki işlevin parametreleri, çerezin adı (cname), çerezin değeri (cvalue) ve çerezin süresinin dolmasına kalan gün sayısıdır (exdays).
İşlev, tanımlama bilgisi adını, tanımlama bilgisi değerini ve sona erme dizesini bir araya getirerek bir tanımlama bilgisi ayarlar.
Çerez Almak İçin Bir İşlev
Ardından, functionbelirtilen bir tanımlama bilgisinin değerini döndüren bir tanımlama bilgisi oluştururuz:
Örnek
function getCookie(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for(let i = 0; i <ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
İşlev açıkladı:
Çerez adını parametre (cname) olarak alın.
Aranacak metinle (cname + "=") bir değişken (ad) oluşturun.
Tanımlama bilgilerini özel karakterlerle işlemek için tanımlama bilgisi dizesinin kodunu çözün, örneğin '$'
Document.cookie'yi noktalı virgüllerle ca (ca = decodingCookie.split(';')) adlı bir diziye bölün.
ca dizisinde dolaşın (i = 0; i < ca.uzunluk; i++) ve her bir c = ca[i] değerini okuyun.
Tanımlama bilgisi bulunursa (c.indexOf(name) == 0), tanımlama bilgisinin değerini döndürün (c.substring(name.length, c.length).
Çerez bulunamazsa, "" döndürün.
Bir Çerez Kontrol Etme İşlevi
Son olarak, bir çerezin ayarlanıp ayarlanmadığını kontrol eden işlevi oluşturuyoruz.
Çerez ayarlanmışsa, bir karşılama mesajı görüntüler.
Tanımlama bilgisi ayarlanmazsa, kullanıcının adını soran bir bilgi istemi kutusu görüntüler ve setCookieişlevi çağırarak kullanıcı adı tanımlama bilgisini 365 gün boyunca saklar:
Örnek
function checkCookie() {
let
username = getCookie("username");
if (username != "") {
alert("Welcome again " + username);
} else {
username = prompt("Please enter your name:", "");
if (username != ""
&& username != null) {
setCookie("username", username, 365);
}
}
}
Şimdi hep beraber
Örnek
function setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
let expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue +
";" + expires + ";path=/";
}
function getCookie(cname) {
let name = cname + "=";
let ca
= document.cookie.split(';');
for(let i = 0; i < ca.length; i++)
{
let 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() {
let user = getCookie("username");
if (user != "")
{
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:", "");
if (user != "" &&
user != null) {
setCookie("username", user, 365);
}
}
}
Yukarıdaki örnek checkCookie(), sayfa yüklendiğinde işlevi çalıştırır.