Javascript Cookie Kullanımı – Oluşturma & Okuma & Silme & Güncelleme

Bu yazıda javascript cookie kullanımı ile çerez oluşturma, silme ve güncelleme gibi konuların nasıl basit bir şekilde yapılabileceğini ayrıntılı bir şekilde görmüş olacaksınız. İlk olarak çerezlerin ne olduğundan ve nerelerde kullanıldığından kısaca bahsedelim.

Cookie (çerez), kullanıcının bilgisayarında web tarayıcılar aracılığıyla saklanan ve en fazla 4 KB boyutunda olan metin (txt) dosyalarıdır. Üyelik sistemi, kullanıcı şifresinin hatırlanması, alışveriş sitelerindeki sepet mantığı, kullanıcı hareketliliğinin ve tercihlerinin izlenmesi, sonrasında kullanıcıya daha alakalı sonuçların gösterilmesi gibi kullanıcı deneyimini arttıran faaliyetlerde sıklıkla kullanılır.

Başlarda sunucu tarafında çalışan PHP gibi web proğramlama dillerinin kullanması için oluşturulan eski bir tarayıcı (istemci) tabanlı depolama tekniğidir. Ancak günümüzde, sunucu tarafında kullanmaya kıyasla biraz daha zor gözükse de pratik hale getirilebilmekte ve sonuç olarak cookie oluşturma, silme ve güncelleme gibi cookie kullanımı süreci tarayıcı tarafından da yapılabilmekte.

Diğer yandan çerez içerisinde oldukça önemli ve hassas veriler kötü niyetli kişiler tarafından kullanılabileceği için sağlam bir şifreleme olmaksızın veriler çerezlerde saklanmamalıdır. Bu arada hatırlatayım, PHP cookie kullanımı ve güvenliği konusuyla ilgileniyorsanız sitem üzerinde böyle bir içerik de mevcut.

Sayfa Özeti;

–>Javascript Cookie Nasıl Oluşturulur?
–>Javascript Cookie Nasıl Okunur?
–>Javascript Cookie Nasıl Güncellenir?
–>Javascript Cookie Nasıl Silinir?
–>Javascript Cookie Oluşturma – Okuma – Güncelleme – Şifre Fonksiyonları?

Ayrıntılardan yeterince bahsettik, şimdi javascript cookie kullanımı konusuna giriş yapalım.

Javascript cookie oluşturma, okuma ve silme işlemi için “document.cookie” özelliği kullanılır. Bu özellik, açılan web sayfasında tanımlı bütün çerezleri temsil eder. Bu özelliğe javascript cookie oluşturma işlemi için name=value şeklinde değer girilmelidir;

document.cookie = "name=Muhammed"; //tarayıcı kapandığında silinir

Yukarıdaki ifadeyle ‘name’ isminde bir cookie oluşturup değerine de ‘Muhammed’ değerini yazmış oluyoruz. Çerezi düzenlemek istersek “name=Ahmet” şeklinde kullanabiliriz.

Oluşturulan çerezlerin süresi varsayılan olarak tarayıcının açık olduğu kadardır. Tarayıcı kapatıldığında çerezler silinir. Çerezlerin tarayıcı kapandıktan sonra silinmesi istenmiyorsa çerezin ömrünü özellikle belirtmeniz gerekir. Böylelikle web sitesini ziyaret eden kullanıcının tarayıcısı kapansa bile belirtilen süreye kadar çerezin aktif kalması sağlanır.

Javascript çerez oluşturma sırasında “express” veya “max-age” olarak 2 ayrı süre belirtme seçeneği bulunmakta. Belirli bir tarih ve saate kadar çerezin aktif kalması isteniyorsa “express” özelliğinin kullanılması gerekirken, belirli bir süre kadar aktif kalması istenirse “max-age” özelliğinin kullanılması gerekir.

Mesela, aşağıdaki ifadeyle sitenin bütün dizininde çalışacak, 25 Kasım 2020 Pazar günü saat 10’a kadar tarayıcıda aktif olacak “name” isminde bir cookie oluşturup, değerini ise ‘Muhammed’ olarak tanımlamış oluyoruz.

document.cookie = "name=Muhammed; expires=Sun, 25 Nov 2020 10:00:00 UTC;";

Tarih belirlemek yerine şu an ki tarihten itibaren 2 gün boyunca aktif kalacak bir çerez tanımlamak isteseydik aşağıdaki gibi kullanmamız gerekecekti. 2 günlük zamanı ise saniye cinsinden belirtmeliyiz.

document.cookie = "name=Muhammed; max-age="+60*60*24*2;

Oluşturulan çerezin aktifliği için özel olarak bir konum belirtilmezse varsayılan olarak çerezin oluşturulduğu sayfanın bulunduğu dizindeki ve bu dizinin alt dizinlerindeki tüm web sayfalarında çerez aktif olacaktır. Yani anasayfada oluşturulan bir cookie, web sitesindeki alt domainler hariç olmak üzere bütün sayfalarda geçerli olacaktır.

Eğer bir konum belirtilirse, belirtilen konumdaki tüm sayfalar ile bu konumdaki tüm alt dizindeki sayfalarda çerez aktif olur. Konum belirtmek için “path” özelliği kullanılmaktadır. Cookie oluşturma esnasında “path=/” şeklinde bir ifade girilirse, oluşturulan çerezin hangi sayfada oluşturulduğuna bakılmaksızın tüm sayfalarda geçerli olması sağlanır.

document.cookie = "name=Muhammed; path=/";

Oluşturulan çerezler varsayılan olarak, oluşturuldukları alan adındaki sayfalar için etkin durumda olacaktır. Çerezin web sitesinin belirli alt alan adlarında da etkili olmasını istiyorsanız ‘domain’ özelliğini kullanmalısınız.

Bir çerez, blog.ornekalanadi.com konumundaki bir sayfada oluşturuluyorsa ve bu çerezin “path” özelliğine ‘ / ‘ değeri ile “domain” özelliğine ‘ornekalanadi.com’ değeri girilmişse, bu çerez ‘ticaret.ornekalanadi.com’ ve ‘seyahat.ornekalanadi.com’ ve bu alan adlarına ait tüm web sayfalarında aktif olacağı anlamına gelir.

document.cookie = "name=Muhammed; path=/; domain=ornekalanadi.com";

Javascript cookie kullanımı sırasında çerez oluştururken “secure” özelliği tanımlanırsa, çerezin sadece HTTPS bağlantısı üzerinden aktarılacağı belirtilmiş olur.

document.cookie = "name=Muhammed; path=/; domain=ornekalanadi.com; secure";

İçeriğin başlarında javascript cookie okuma işlemi için document.write özelliğinin kullanıldığından bahsetmiştik. Bu özelliğin kullanılmasıyla, ilgili web sayfasında tanımlı olan tüm cookie değerleri, aralarında noktalı virgül işareti olacak şekilde getirilir.

var cookie_string = document.cookie;

Yukarıdaki kod hangi sayfada çalıştırılırsa, o sayfada tanımlı olan çerezler “cookie_string” değişkenine string türünde aktarılmış olacak. Örnek: isim=deger;isim2=deger

Elde edilen bu metinden javascript split() fonksiyonu ile string parçalama işlemi yapılarak teker teker cookie değerleri elde edilebilir.

//string ifadeyi ';' ifadesine göre parçalıyoruz ve diziye ceviriyoruz. Dizide 'cerez_ismi=cerez_degeri' seklinde depolaniyorlar 
var cerezler = document.cookie.split(";");
for (var i = 0; i < cerezler.length; i++) { //dizi icerisinde donuyoruz 
	var cerez_degeri = cerezler[i].split("="); //'cerez_ismi=cerez_degeri' seklindeki verileri '=' ifadesine gore parcaliyoruz ve cerez_degeri degiskenine aktariyoruz
	if("cerez_ismi" == cookiePair[0].trim()) { //isminin 'cerez ismi' olup olmadigini kontrol ediyoruz. Esitse 
		alert(cookiePair[1]); //cerezin degerini ekrana yazdiriyoruz 
	} 
}

Çerezi güncellemek için aynı isim ve yol değerlerine sahip bir çerez daha oluşturulması gerekir. Aynı ada sahip ancak farklı konum değeri girilirse, bu varolan bir çereze eşitlenmez ve yeni bir çerez oluşturma işlemi yapılmış olur.

Aşağıdaki örnekle çerez oluşturma ve oluşturulan bu çerezin güncellenmesi işlemini görebilirsiniz.

//Cookie Oluşturma 
document.cookie = "name=Ahmet; path=/";

//Cookie Güncelleme 
document.cookie = "name=Mehmet; path=/";

Yukarıdaki örnekte ilk satırda ‘name’ isimli bir çerez oluşturduğumuzu, içeriğinin ‘Ahmet’ olduğunu, çerezin tüm sitede çalışması gerektiğini belirtirken, ikinci satırda ise aynı isimde yani ‘name’ diye bir çerez oluşturup, içeriğini Mehmet olarak değiştiriyoruz.

Aynı isimde iki çerez olmayacağı için ikinci çerez, ilkinin üstüne yazılacak, yani çerezi düzenlemiş olacağız.

Javascript cookie silme işlemi oldukça basit. Oluşturulan çerezin tarihiyle oynamak. Çerez oluştururken çerezin aktif kalma süresini “max-age” ve “expires” özelliklerini kullanarak 2 farklı yolla tanımlayabileceğimizi görmüştük. Buradan yola çıkarsak, “expires” özelliğiyle çerezi silebilmek için şu an ki zamandan önce bir değer vermemiz gerekir.

Mesela bugün 2 mayıs 2020 ise, 1 mayıs 2020 şeklinde bir değer girmemiz, çerezin silinmesi için yeterli. Böylelikle aşağıdaki örnekteki ‘name’ isimli çerezi silebilmiş oluruz. Çerezi silerken içeriğinin var olup olmaması önemli değil.

document.cookie = "name=Muhammed; expires=Sun, 1 May 2020 10:00:00 UTC;";

“max-age” özelliğini kullanarak çerezi silebilmek için özelliğe ‘0’ değerini vermek yeterli olacaktır.

document.cookie = "name=Muhammed; max-age=0";

Şunu da belirteyim. Çerezi hangi zaman tipiyle oluşturursanız oluşturun, silerken bu 2 yöntemden istediğinizi kullanarak çerezi silebilirsiniz.

Yukarıdaki örneklerle cookie oluşturma, düzenleme ve silme işlemlerinin mantığını öğrendik. Şimdi hazır fonksiyonlar ile bu işlemlerin nasıl pratik bir şekilde yapılabileceğini göreceğiz.

Javascript Cookie Okuma Fonksiyonu

Aşağıdaki fonksiyon ile javascript cookie okuma işlemi daha pratik yapılabilir.

function getCookie(c_name){ 
	var i,x,y,ARRcookies=document.cookie.split(";"); 
	for (i=0;i

function getCookie(c_name) {
	var name = c_name + "=";
	var ca = document.cookie.split(';');
	for(var i = 0; i 

function setCookie(c_name,value,exdays){ //cookie oluşturma 
	var exdate=new Date();
	exdate.setTime(exdate.getTime() + exdays);
	var c_value=escape(value) + ((exdays==null) ? "" : "; path=/; expires="+exdate.toUTCString());
	document.cookie=c_name + "=" + c_value;
}