Çerezler JavaKomut Dosyası: Ayarla, Al ve Sil Örneği

Çerezler nelerdir?

Çerez, tarayıcınız tarafından erişilmek üzere bilgisayarınızda saklanan bir veri parçasıdır. Çerezlerin faydalarından bilinçli veya bilinçsiz olarak yararlanmış olabilirsiniz. Örneğin, Facebook gibi bir siteye her giriş yaptığınızda bilgilerinizi tekrar yazmak zorunda kalmamak için oturumunuzun açık kalmasını hiç tercih ettiniz mi? Eğer öyleyse, çerez kullanıyorsunuz demektir. Çerezler anahtar/değer çiftleri olarak kaydedilir.

Önemli bir açıklama: Çerez, şifrenizi saklamaz. Başarılı bir girişten sonra sunucunun verdiği rastgele bir belirteç olan oturum tanımlayıcısını saklar. Sunucu bu belirteci hesabınızla eşleştirir, bu nedenle şifrenin kendisi asla sunucudan ayrılmaz.

Neden bir Çereze ihtiyacınız var?

Bir arasındaki iletişim web tarayıcı Sunucu, HTTP adı verilen durumsuz bir protokol kullanarak iletişim kurar. Durumsuz bir protokol, her isteği bağımsız olarak ele alır. Bu nedenle, sunucu verileri tarayıcıya gönderdikten sonra saklamaz. Ancak birçok durumda, verilere tekrar ihtiyaç duyulacaktır. İşte burada çerezler devreye giriyor. Çerezler sayesinde, web tarayıcısının verilere her ihtiyaç duyulduğunda sunucuyla iletişim kurmasına gerek kalmaz. Bunun yerine, veriler doğrudan bilgisayardan alınabilir.

Tipik kullanım alanları arasında oturum açılmış bir kaydı hatırlama, dil veya tema tercihini saklama, vb. yer alır.ping bir dükkandaki ürünlerping Sayfalar arasındaki sepet ve ilk kez gelen ziyaretçilerle geri dönen ziyaretçilerin sayılması.

Javascript Çerez Ayarla

Çerezleri, `document.cookie` özelliğini kullanarak şu şekilde oluşturabilirsiniz.

document.cookie = "cookiename=cookievalue"

Çerezlerinize bir son kullanma tarihi bile ekleyebilirsiniz, böylece söz konusu çerez belirtilen tarihte bilgisayardan kaldırılır. Son kullanma tarihi UTC/GMT formatında ayarlanmalıdır. Son kullanma tarihi ayarlamazsanız, kullanıcı tarayıcıyı kapattığında çerez kaldırılır.

document.cookie = "cookiename=cookievalue; expires= Thu, 21 Aug 2031 20:00:00 UTC"

Çerezlerin hangi etki alanına ve bu etki alanındaki hangi dizinlere ait olacağını belirtmek için etki alanı ve yol ayarlarını da yapabilirsiniz. Varsayılan olarak, çerez, çerezi oluşturan sayfaya aittir.

document.cookie = "cookiename=cookievalue; expires= Thu, 21 Aug 2031 20:00:00 UTC; path=/ "

// Geçerli sayfanın alan adını ve tüm alan adını kapsayan bir yolu içeren bir çerez oluşturun.

JavaKomut Dosyası Çerez Al

Çerezlere şu şekilde erişebilirsiniz; bu, geçerli alan adı için kaydedilmiş tüm çerezleri döndürecektir.

var x =  document.cookie

Döndürülen değer, şu biçimde tek bir dizedir: name1=value1; name2=value2Çerezleri isimlerine göre okumak için yerleşik bir yöntem bulunmadığından, dizenin bölünmesi gerekiyor. Aşağıdaki yardımcı fonksiyon, isim yoksa tek bir değer, isim yoksa boş bir dize döndürür.

function getCookie(name) {
    const pairs = document.cookie.split(";");
    for (let i = 0; i < pairs.length; i++) {
        const pair = pairs[i].trim();
        if (pair.indexOf(name + "=") === 0) {
            // decode in case the value contained spaces or symbols
            return decodeURIComponent(pair.substring(name.length + 1));
        }
    }
    return "";
}

document.cookie = "username=Ann Smith; path=/";
console.log(getCookie("username"));
console.log(getCookie("missing") === "");

Çıktı:

Ann Smith
true

JavaKomut Dosyası Çerezi Sil

Bir çerezi silmek için, çerezin değerini boş olarak ayarlamanız ve expires değerini geçmiş bir tarihe ayarlamanız yeterlidir.

document.cookie = "cookiename= ; expires = Thu, 01 Jan 1970 00:00:00 GMT"

Çoğu silme işleminin başarısız olmasına neden olan bir ayrıntı var. Tarayıcı, çerezleri adlarıyla birlikte yol ve etki alanı bilgileriyle tanımlar; bu nedenle silme ifadesinde, çerez oluşturulurken kullanılan aynı yol ve etki alanı bilgileri tekrarlanmalıdır.

// created with an explicit path
document.cookie = "theme=dark; path=/; max-age=2592000";

// deletion must repeat that same path
document.cookie = "theme=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";

// max-age=0 achieves the same result in one shorter line
document.cookie = "theme=; path=/; max-age=0";

Çerez Özelliklerinin Açıklaması

İlk noktalı virgülden sonraki her özellik, çerezin ne kadar süreyle geçerli olacağını, hangi isteklerin onu taşıyacağını ve hangi kodun onu okuyabileceğini değiştirir. Aşağıdaki referans bunların hepsini kapsamaktadır.

SameSite, tarayıcıların artık varsayılan bir değer uyguladığı için özellikle dikkat çekmeyi hak ediyor. Kabul edilen üç değer şu şekilde davranır.

• Sıkı: İstek başka bir siteden geldiğinde çerez asla gönderilmez; bu, bankacılık işlemleri için en güvenli ayardır.
• Gevşek: Çerez, bir bağlantıya tıklama gibi üst düzey gezinme işlemleriyle birlikte taşınır, ancak siteler arası resimler veya çerçevelerle birlikte taşınmaz. Bu, modern tarayıcıların varsayılan ayarıdır.
• Yok: Çerez, siteler arası her istekte gönderilir ve Güvenli (Secure) özniteliğiyle eşleştirilmelidir; aksi takdirde tarayıcı onu reddeder.

// a well configured cookie set from client side script
document.cookie = "language=en; path=/; max-age=31536000; SameSite=Lax; Secure";

Bu Örneği kendiniz deneyin

Aşağıdaki kod, bu üç işlemi bir araya getiriyor. Gün cinsinden ölçülen bir geçerlilik süresine sahip bir çerez oluşturuyor, bu çerezi isimle okuyor ve geri dönen ziyaretçiyi karşılıyor. Kodun çalışması için özel talimatlar… Çalıştır düğmesine iki kez basın.

<html>
<head>
	<title>Cookie!!!</title>
	<script type="text/javascript">
		function createCookie(cookieName,cookieValue,daysToExpire)
        {
          var date = new Date();
          date.setTime(date.getTime()+(daysToExpire*24*60*60*1000));
          document.cookie = cookieName + "=" + cookieValue + "; expires=" + date.toGMTString();
        }
		function accessCookie(cookieName)
        {
          var name = cookieName + "=";
          var allCookieArray = document.cookie.split(';');
          for(var i=0; i<allCookieArray.length; i++)
          {
            var temp = allCookieArray[i].trim();
            if (temp.indexOf(name)==0)
            return temp.substring(name.length,temp.length);
       	  }
        	return "";
        }
		function checkCookie()
        {
          var user = accessCookie("testCookie");
          if (user!="")
        	alert("Welcome Back " + user + "!!!");
          else
          {
            user = prompt("Please enter your name");
            num = prompt("How many days you want to store your name on your computer?");
            if (user!="" && user!=null)
            {
            createCookie("testCookie", user, num);
            }
          }
        }
	</script>
</head>
<body onload="checkCookie()"></body>
</html>

Beklenen Davranış:

First run  : "Please enter your name"  -> Ann
             "How many days you want to store your name on your computer?" -> 5
Second run : alert box shows  Welcome Back Ann!!!

Code açıklama: `createCookie` fonksiyonu, gün sayısını milisaniyeye çevirir ve bunları geçerli zamana ekleyerek son kullanma tarihini oluşturur. `accessCookie` fonksiyonu, çerez dizesini noktalı virgüllerle ayırır, her bir parçayı kırpar ve parçanın başlangıcını istenen adla karşılaştırır. `checkCookie` fonksiyonu ise sayfa yüklenirken bu ikisini bir araya getirir.

Çerezler, localStorage ve sessionStorage karşılaştırması

Çerezler, bir tarayıcının veri saklayabileceği tek yer değildir. İki web depolama seçeneği mevcuttur ve doğru olanı seçmek, her istekte gereksiz baytların gönderilmesini önler.

Pratik kural basittir. Eğer sunucu değere ihtiyaç duyuyorsa, çerez kullanın. Eğer yalnızca sayfa ihtiyaç duyuyorsa, localStorage veya sessionStorage kullanın, çünkü bu değerler ağ isteğine hiçbir zaman ek ağırlık katmaz.

Çerez işleme kodu genellikle birçok sayfada paylaşılır, bu nedenle gözden geçirin. dahili ve harici JavaSenaryo Yerleştirmeye karar vermeden önce. Burada kullanılan ip bölme yöntemi, şu temele dayanmaktadır: JavaKomut dosyası dizeleri hem de JavaKomut dosyası dizi yöntemlerive diğer çalışma senaryoları şurada yer almaktadır: pratik JavaKomut dosyası kod örnekleri.

SSS