Javascript ile Çerez (Cookie) Oluşturma ve Okuma
Javascript meraklısı web yazılımcılarına yeniden selamlar :)
Artık Javascript makalelerimizin son demlerine geliyoruz çünkü yazacak makale bulmakta zorlanıyorum artık o yüzden belki bu son makalemiz olabilir ya da son bi kez daha sürpriz yaparak bi makale daha ekleyebilirim :)
Neyse bugün Javascript ile cookie (çerez) oluşturmayı öğreneceğiz, çerez dediğimiz bu olay bir internet sitesinin bilgisayar kullanıcısının web tarayıcısında oluşturduğu metin tabanlı bir dosyadır.Bu metin tabanlı dosyalar sayesinde web sitesi herhangi bir bilgiyi web tarayıcısına (internet explorer,firefox,chrome gibi) kaydedip daha sonra yeniden okuyabilmesidir.
Çerezler daha çok site üyelerinin sitede oturum açmaları (login/sign in) için kullandıkları kullanıcı adı ve parolalarını arka planda tutmaları için kullanılır.Bu sayede kullanıcı bir siteye üye girişi yaptıktan sonra tarayıcısını kapatıp yeniden açsa bile sitenin yeniden üye girişi yapma zorunluluğu kalkar ve bu yüzden oldukça bir işlevdir.
Çerez dosyaları metin tabanlı ve şifresiz olarak kaydedilebildikleri için şifre bilgilerinin çalınma riski ve hesapların hacklenme riskinini yükseltmektedir.Bunu bilen e-ticaret firmaları ve bankalar gibi finansal kurumlar ya cookie kullanımını tercih etmezler ya da kullanıcıları bilgilendirmek durumunda kalırlar.
Çerezlerle ilgili son bilmemiz gereken noktalardan biri bir çerez dosyasının maksimum boyutunun 4 KB olabileceğidir,o yüzden çok büyük bilgileri saklayamayız.Diğer bilmemiz gereken nokta ise çerez dosyasının bir süresi vardır ve zaman aşımına uğrayan çerezin içindeki bilginin geçerliliği web tarafında ortadan kalmaktadır.Dolayısıyla çerez dosyasını web sitesi tarafından silemeyiz ancak geçerliliğini kaldırabiliriz.
Peki Javascript çerez nasıl oluşturulur?
Bir web tarayıcısına çerez eklemenin birden çok yolu vardır; ASP, ASP.Net, PHP, JSP gibi web programlama dilleri ile yapılabilmektedir ancak Javascript ile bu işlem daha da kolaylaşmaktadır.
En basit anlamda
document.cookie="cerez_adi=cerez_degeri; exprires=gelecek_tarih_saat;
kod satırı ile çerez oluşturuyor ve
var cerez=document.cookie;
ile okuyor ve
document.cookie="cerez_adi; exprires=gecmis_tarih_saat";
kod satırı ile çerezimizin geçerliğine son veriyoruz.
Şimdi Adobe Dreamveawer uygulamamızı açalım ve Mozilla Firefox tarayıcımıza bir login/sign in sayfası tasarlayalım:
Kullanıcı "Beni Hatırla" seçeneğini işaretledikten sonra "Oturum Aç" butonuna tıkladığında web tarayıcımızda bir çerez oluşturacağız,bunun için butonumuzun onclick eventine yazacağımız Javascript fonksiyonumuzun adını yazıyoruz:
Javascript fonksiyonumuzu HTML belgemizin head tagı içindeki script tagına ekliyoruz:
Kodlar biraz gözünüze fazla gelebilir ancak 24 ve 25.satırı bilseniz yeterli ;)
Oturum açalım:
Firefox ile çerezlere baktığımızda bilgilerin tarayıcı belleğinde depolandığını görüyoruz:
Şimdi ise web tarayıcımızı kapatıp yeniden açtığımızda yeniden kullanıcı adı ve şifre sormasına gerek kalmadan bilgileri otomatik olarak input (textbox) öğelerine dolduracağız.Bunun için en basit anlamda Javascript pencere olaylarından olan onload(); eventini body tagında kullanıyor ve site açıldığı anda çerez dosyasında tutulan kullanıcı adı ve parolasını oku diyoruz:
Sayfamızı kapatıp yeniden açıyoruz:
Böylece input nesnelerimiz çerez dosyasını okudu ve bilgileri kullanıcıdan yeniden isteme gereksinimi duymadı.
Aslında burada yaptığımız örnekte kullanıcı adı ve parolanın inputlara getirilme konusu yeni tarayıcıların parola hatırlama - form bilgilerini hatırlama tekniğinden farklı bir yanı kalmadı çünkü bir web yazılımcı kullanıcı adı ve parolayı bu kadar açık şekilde kullanarak üye bilgilerini deşifre eder gibi kullanmak yerine "eğer sitemize ait bir çerez kullanıcı bilgisayarında varsa login sayfasını atla ve doğrudan anasayfaya yönlendir" demesi daha mantık ve güvenli bir algoritma kullanması gerekmektedir.
Çünkü bir web sitesinin güvenliğinden en çok sorumlu olan kişi yine yazılımcının kendisidir.
Javascript ile çerez kullanımını öğrendiğimize göre makalemizin sonuna gelmiş bulunmaktayız,umarım yeni bir Javascript makale konusu daha bulabilirsem sonraki makalemizde yeniden görüşebileceğiz.
Hoşçakalın esen kalın :)
Artık Javascript makalelerimizin son demlerine geliyoruz çünkü yazacak makale bulmakta zorlanıyorum artık o yüzden belki bu son makalemiz olabilir ya da son bi kez daha sürpriz yaparak bi makale daha ekleyebilirim :)
Neyse bugün Javascript ile cookie (çerez) oluşturmayı öğreneceğiz, çerez dediğimiz bu olay bir internet sitesinin bilgisayar kullanıcısının web tarayıcısında oluşturduğu metin tabanlı bir dosyadır.Bu metin tabanlı dosyalar sayesinde web sitesi herhangi bir bilgiyi web tarayıcısına (internet explorer,firefox,chrome gibi) kaydedip daha sonra yeniden okuyabilmesidir.
Çerezler daha çok site üyelerinin sitede oturum açmaları (login/sign in) için kullandıkları kullanıcı adı ve parolalarını arka planda tutmaları için kullanılır.Bu sayede kullanıcı bir siteye üye girişi yaptıktan sonra tarayıcısını kapatıp yeniden açsa bile sitenin yeniden üye girişi yapma zorunluluğu kalkar ve bu yüzden oldukça bir işlevdir.
Çerez dosyaları metin tabanlı ve şifresiz olarak kaydedilebildikleri için şifre bilgilerinin çalınma riski ve hesapların hacklenme riskinini yükseltmektedir.Bunu bilen e-ticaret firmaları ve bankalar gibi finansal kurumlar ya cookie kullanımını tercih etmezler ya da kullanıcıları bilgilendirmek durumunda kalırlar.
Çerezlerle ilgili son bilmemiz gereken noktalardan biri bir çerez dosyasının maksimum boyutunun 4 KB olabileceğidir,o yüzden çok büyük bilgileri saklayamayız.Diğer bilmemiz gereken nokta ise çerez dosyasının bir süresi vardır ve zaman aşımına uğrayan çerezin içindeki bilginin geçerliliği web tarafında ortadan kalmaktadır.Dolayısıyla çerez dosyasını web sitesi tarafından silemeyiz ancak geçerliliğini kaldırabiliriz.
Peki Javascript çerez nasıl oluşturulur?
Bir web tarayıcısına çerez eklemenin birden çok yolu vardır; ASP, ASP.Net, PHP, JSP gibi web programlama dilleri ile yapılabilmektedir ancak Javascript ile bu işlem daha da kolaylaşmaktadır.
En basit anlamda
document.cookie="cerez_adi=cerez_degeri; exprires=gelecek_tarih_saat;
kod satırı ile çerez oluşturuyor ve
var cerez=document.cookie;
ile okuyor ve
document.cookie="cerez_adi; exprires=gecmis_tarih_saat";
kod satırı ile çerezimizin geçerliğine son veriyoruz.
Şimdi Adobe Dreamveawer uygulamamızı açalım ve Mozilla Firefox tarayıcımıza bir login/sign in sayfası tasarlayalım:
Kullanıcı "Beni Hatırla" seçeneğini işaretledikten sonra "Oturum Aç" butonuna tıkladığında web tarayıcımızda bir çerez oluşturacağız,bunun için butonumuzun onclick eventine yazacağımız Javascript fonksiyonumuzun adını yazıyoruz:
Javascript fonksiyonumuzu HTML belgemizin head tagı içindeki script tagına ekliyoruz:
Kodlar biraz gözünüze fazla gelebilir ancak 24 ve 25.satırı bilseniz yeterli ;)
Oturum açalım:
Firefox ile çerezlere baktığımızda bilgilerin tarayıcı belleğinde depolandığını görüyoruz:
Şimdi ise web tarayıcımızı kapatıp yeniden açtığımızda yeniden kullanıcı adı ve şifre sormasına gerek kalmadan bilgileri otomatik olarak input (textbox) öğelerine dolduracağız.Bunun için en basit anlamda Javascript pencere olaylarından olan onload(); eventini body tagında kullanıyor ve site açıldığı anda çerez dosyasında tutulan kullanıcı adı ve parolasını oku diyoruz:
Sayfamızı kapatıp yeniden açıyoruz:
Böylece input nesnelerimiz çerez dosyasını okudu ve bilgileri kullanıcıdan yeniden isteme gereksinimi duymadı.
Aslında burada yaptığımız örnekte kullanıcı adı ve parolanın inputlara getirilme konusu yeni tarayıcıların parola hatırlama - form bilgilerini hatırlama tekniğinden farklı bir yanı kalmadı çünkü bir web yazılımcı kullanıcı adı ve parolayı bu kadar açık şekilde kullanarak üye bilgilerini deşifre eder gibi kullanmak yerine "eğer sitemize ait bir çerez kullanıcı bilgisayarında varsa login sayfasını atla ve doğrudan anasayfaya yönlendir" demesi daha mantık ve güvenli bir algoritma kullanması gerekmektedir.
Çünkü bir web sitesinin güvenliğinden en çok sorumlu olan kişi yine yazılımcının kendisidir.
Javascript ile çerez kullanımını öğrendiğimize göre makalemizin sonuna gelmiş bulunmaktayız,umarım yeni bir Javascript makale konusu daha bulabilirsem sonraki makalemizde yeniden görüşebileceğiz.
Hoşçakalın esen kalın :)
bu kodları resim olarak değil de yazı olark verseniz :D