JavaScript Çerezler (Cookies)

18 Ekim 2009, admin

Çerez, genellikle bir kullanıcıyi tanımlamak için kullanılır.

Çerez nedir?

Çerez, ziyaretçinin bilgisayarında saklanan bir değişkendir. Her seferinde aynı bilgisayar bir tarayıcıdan bir sayfa istediğinde, tarayıcı çerez de gönderecektir. JavaScript ile çerez değerleri yaratabilir ve daha sonra depolanan yerden çağırabilirsiniz.

Çerez örnekleri:

Ad çerezi: Bir ziyaretçi sayfanıza ilk defa giriş yaptığında ismini girmelidir. İsim bir çerezde saklanır. Ziyaretçi sayfanıza tekrar ulastığında, ziyaretçi “hoşgeldiniz xx veya yy” şeklinde bir karşılama mesajı alabilir. İsim saklanan çerezden alınır.
Şifre çerezi: Bir ziyaretçi sayfanıza ilk defa giriş yaptığında şifre girmelidir. Şifre bir çerezde saklanır. Ziyaretçi sayfanıza tekrar ulaştığında, şifre saklanan çerezden alınır.
Tarih çerezi: Bir ziyaretçi sayfanıza ilk defa giriş yaptığında, ilgili tarih bir çereze kaydedilir. Ziyaretçi sayfanıza tekrar ulaştığında, ziyaretçi “son ziyaret tarihi 11 Ağustos 2009” şeklinde bir karşılama mesajı alabilir. Tarih saklanan çerezden alınır.

Çerez oluşturma ve saklama

Bu örnekte ziyaretçi ismini kaydeden bir çerez yaratacağız. Ziyaretçi internet sayfasına ilk defa ulaştığında ismini girmesi istenecektir ve isim bir çerezde depolanır. Ziyaretçi aynı sayfayı bir daha açtığında karşılama mesajı alacaktır.

Önce ziyaretçinin ismini depolayacak bir çerez yaratalım

function setCookie(c_name,value,expiredays) { var exdate=new Date(); exdate.setDate(exdate.getDate()+expiredays); document.cookie=c_name+ "=" +escape(value)+ ((expiredays==null) ? "" : ";expires="+exdate.toGMTString()); }

Yukarıdaki fonksiyonun parametleri çerezin ismini, çerezin değerini ve çerezin geçerlilik süresinin dolacağı gün sayısını tutar.
Yukarıdaki fonksiyonda, önce gün sayısını geçerli bir tarihe dönüştürürüz ve sonra çerezin geçerliliğini yitireceği gün sayısını ekleriz. Bundan sonra da çerezin ismini, çerez değerini ve geçerliliğini kaybedeceği tarihi, document.cookie içinde depolarız.
Sonra, çerezin oluşturulduğunu kontrol eden başka bir çerez yaratırız.

function getCookie(c_name) { if (document.cookie.length>0) { c_start=document.cookie.indexOf(c_name + "="); if (c_start!=-1) { c_start=c_start + c_name.length+1; c_end=document.cookie.indexOf(";",c_start); if (c_end==-1) c_end=document.cookie.length; return unescape(document.cookie.substring(c_start,c_end)); } } return ""; }

Yukarıdaki fonksiyon önce çerezin tam olarak document.cookie içinde depolanıp depolanmadığını kontrol eder. Eğer document.cookie başka çerezleri de tutuyor ise bizim yarattığımız çerezin saklanıp saklanmadığını kontrol edin. Eğer çerez bulunursa değer döner, yoksa boş bir değer döndürür.

Son olarak, çerez ayarları yapıldığında karşılama mesajı gösteren bir fonksiyon yarattık. Eğer çerez ayarı yapılmamışsa, kullanıcının adının girilmesi istenen bir bilgi isteme kutusu gösterilir.

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

Kodun tamamı.

<html> <head> <script type="text/javascript"> function getCookie(c_name) { if (document.cookie.length>0) { c_start=document.cookie.indexOf(c_name + "="); if (c_start!=-1) { c_start=c_start + c_name.length+1; c_end=document.cookie.indexOf(";",c_start); if (c_end==-1) c_end=document.cookie.length; return unescape(document.cookie.substring(c_start,c_end)); } } return ""; }

function setCookie(c_name,value,expiredays) { var exdate=new Date(); exdate.setDate(exdate.getDate()+expiredays); document.cookie=c_name+ "=" +escape(value)+ ((expiredays==null) ? "" : ";expires="+exdate.toGMTString()); }

function checkCookie() { username=getCookie('username'); if (username!=null && username!="") { alert('Welcome again '+username+'!'); } else { username=prompt('Please enter your name:',""); if (username!=null && username!="") { setCookie('username',username,365); } } } </script> </head>

<body onload="checkCookie()"> </body> </html>