Depolama Savaşları : Cookie vs Local Storage & Session Storage

5 min readJul 21, 2022

--

Çerez, bir web sitesini ziyaret ettiğimizde ,web sunucusu tarafından oluşturulan ve tarayıcımız tarafından bilgisayarımızda depolanan veri bloklarıdır.

Çerezler, göz atma bilgilerini kaydederek çevrimiçi deneyimimizi daha kolay hale getirir. Çerezler sayesinde siteler oturumumuzu açık tutabilir, daha önce form alanlarına girdiğimiz ad, adres, şifre ve ödeme kartı gibi bilgileri de sonraki kullanım için kaydeder .

Haydi şimdi depolama konusunu kronolojik olarak inceleyelim. Önce çerezleri öğrenelim ve sonra hikayemizde bize local storage ve session storage kavramları eşlik etsin.

Hazırsanız başlıyoruz.

Nerden çıktı bu “Cookie” ?

**Lou Montulli, Inventor of HTTP Cookie. Photo: Peter Adams** **https://www.facesofopensource.com**

Çerez terimi, ilk kez 1994 yılında bir web programcısı olan Lou Montulli tarafından kullanılmıştır. Bir teoriye göre “cookie” adı, 1979'da bir veri paketi için kullanılan "magic cookie" teriminden türedi.

Bir başka iddiaya göre ise ormanda kaybolan Hansel ve Gratel, arkalarına kurabiye kırıntıları bırakarak izlerini sürebildiler. Aktivitelerimizi takip etme mantığından dolayı bu hikayeden esinlenip bu kavrama cookie adı verildi.

**https://www.thefablecottage.com/fables/hansel-and-gretel**

Lou, bir e-ticaret sitesinde alışveriş yapan kişilerin ürünlerini sanal bir alışveriş sepetinde tutmayı istiyordu.İşte bu fikir sayesinde cookie fikrini tarayıcılar için yeniden tasarladı.

**Lou Montulli’s patent on the HTTP Cookie —** **https://www.historyofinformation.com/image.php?id=6046**

Cookie Nedir ve Kullanımı

**Cookie takma isimleri —** **https://www.hp.com/us-en/shop/tech-takes/what-are-computer-cookies**

HTTP çerezleri, bir sunucunun, kullanıcının web tarayıcısına gönderdiği küçük veri parçasıdır. Bu verileri, sunucu oluşturur ve veriler kullanıcıya özel bir kimlik bilgisi(ID) ile saklanır.

Cookie Oluşturma

document.cookie özelliği ile javascriptte çerez oluşturulabilir , okunabilir ve silinebilir.

Çerezler, ad-değer (key-value) çiftlerine kaydedilir . Aşağıdaki kod blogu ile bir çerez oluşturabiliriz:

document.cookie = ‘newCookie’
document.cookie = “username=John Doe”;

Cookielerin Son Kullanma Tarihini Ayarlama

**https://shop.gohcl.com/default.aspx?page=item+detail&itemcode=2764**

Çerezlere bir son kullanma tarihi de ekleyebiliriz. Bunu expires parametresi ile aşağıdaki örnekteki gibi kolaylıkla yapabiliriz.

document.cookie = “username=John Doe; expires=Thu, 14 Dec 2034 12:00:00 UTC”;

Yukarıdaki örnek, “kullanıcı adı” çerezini daha önce olduğu gibi “John Due” olarak ayarlar ancak 14 Aralık 2034 Perşembe ve 12:00:00 UTC’lik bir sona erme tarihi ekler.

Bu sona erme süresine ulaşıldığında, çerez değeri silinecektir.

Not: UTC bir zaman standardıdır. (the coordinated universal time)Eğer herhangi bir son kullanma tarihi belirtmemişsek, varsayılan olarak , tarayıcı kapatıldığında çerez silinir.

Cookielerin Path Değişkenini Ayarlama

**https://doepud.co.uk/anatomy-of-a-url**

Bir yol parametresi ile tarayıcıya çerezin hangi yola ait olduğunu söyleyebiliriz. Eğer çerezimizin path değişkenini path=/admin şeklinde ayarladıysak url bilgimiz /admin veya /admin/… olduğu durumlarda çerezlerimiz görünür , “/cart/…” gibi sayfalarda çerezimiz görünmez.

Eğer herhangi bir path parametresi kullanmadıysak çerezimiz varsayılan olarak geçerli sayfaya aittir.

document.cookie = “username=John Doe; expires=Thu, 14 Dec 2034 12:00:00 UTC; path=/”;

NOT: Uygulamanızın kök yolunda hassas verileri depolamanız önerilmez.

Çerezlerin Dezavantajları

Çerezler, sunucunun her talebinde verileri tekrar yükler. ( Performans azalır.)
Maksimum 4KB bellek alanı sağlar.
Güvenlik sorunları

HTML5 Web Depolama ( Local Storage & Session Storage)

HTML5'te web sayfaları, veriyi yerel (local) olarak, tarayıcı (browser) içinde saklayabilir. Veri, sadece sorgulama olduğu zaman kullanılır, Çerezlerde olduğu gibi sunucunun her talebinde verinin tekrar yüklenmesi söz konusu değildir.

HTML5'in bir diğer büyük avantajı ise, web sitesi ya da mobil uygulamanın performansını kötü etkilemeden, büyük miktarlarda veri depolama olanağı sağlamasıdır. (Çerezler maksimum 4 KB veri depolarken , Web Depolama API’sinde 5 MB’a kadar veri tutulabilir.)

HTML5 Web Depolama verileri, çerezlerden farklı olarak, HTTP aracılığıyla sunucuya taşınmaz. Böylece Web Depolama verilerine yalnızca istemci tarafı komut dosyaları aracılığıyla erişilebilir. Bu, sunucunun doğrudan web depolama alanınındaki verileri okuyamayacağı veya yazamayacağı anlamına gelir. Yani web storageda veriler daha güvenli ve etkin şekilde saklanır.

Veriyi, yerelde saklamak için HTML5'in sağladığı iki yeni nesne mevcuttur: Local Storage ve Session Storage.

Local Storage ve Session Storage arasındaki en temel fark : SessionStorage, verileri oturum sonlanana kadar tutmaktadır. Tarayıcıyı kapattığımızda verilerimiz kaybolurken localStorageda tarayıcı kapatıldıktan sonra da veriler depolanmaktadır.

5 Temel Web Storage Fonksiyonu

1. setItem()
2. getItem()
3. removeItem()
4. key()
5. clear()

setItem( ) :Bu method local storage ve session storageda kayıt ekleme işlemini yapar. Bu metot iki parametre almaktadır. Bunların ilki ‘key’ yani anahtar adı ikincisi ise ‘value’ yani o anahtara karşılık gelen değeri ifade etmektedir.

localStorage.setItem('key','value');
sessionStorage.setItem('key', 'value');localStorage.setItem('name', 'John Doe');
sessionStorage.setItem('name', 'John Doe');

getItem( ) :Bu method local storage ve session storagedaki kayıtlı olan veriyi okur. getItem metodu anahtar adını (key) kendisine parametre olarak alıp geriye değeri (value) döndürmektedir.
Kaydedilmeyen bir veriyi okumaya çalıştığımızda null değeri geri dönmektedir.

localStorage.getItem('key');
localStorage.getItem('name'); output: John Due 
sessionStorage.getItem('key');
sessionStorage.getItem('age'); output: null

removeItem( ): Bu method local storage ve session storage içerisinde seçilen verileri silerken kullanılır.
İçerisine parametre olarak “key” değerini alır.

localStorage.removeItem('key');
localStorage.removeItem('name'); 
localStorage.getItem('name');     output:null
sessionStorage.removeItem('key');
sessionStorage.removeItem('name');
sessionStorage.getItem('name');  output: null

key( ): Bu method local storage ve session storage için seçilen indexteki “key” değerini bize return eder.

localStorage.key(i);
localStorage.key(2);    output: "id"
sessionStorage.key(i);
sessionStorage.key(0);   output: "name"

clear( ) :Local storage ve session storage içerisindeki tüm veriyi temizler.

localStorage.clear();

Cookies vs. Web Storage

Umarım makalem sizler için faydalı olmuştur. Hepinizi çok sevdiğim Kurabiye Canavarı ile selamlıyorum.

Mutlu kodlamalar !

Bana küçük kırmızı bisikletler hakkında bir kitap verin ve bir kutu kurabiye lütfen.

Bu yazı ilk olarak 13.06.2022 tarihinde Segmentify Tech Blog’ta yayınlanmıştır. Yazının ingilizcesine şu linkle gidebilirsiniz :

Storage Wars: Cookies vs. Local Storage vs. Session Storage

Cookies are data blocks created by the web server and stored on our computers by our browsers when we visit a website.

medium.com