Tarayıcıda Veri Saklama Yöntemleri: LocalStorage, SessionStorage ve Cookie

Web geliştirme sürecinde, tarayıcıda kullanıcı tercihleri, oturum bilgileri veya geçici bazı verileri birden fazla kullanılabilirlik özelliğinden dolayı depolamak oldukça yaygındır. Bu veriler, projenin içerisindeki birçok yerde kullanılmaya ihtiyaç duyulurlar ve bunları her kullanmak istediğimizde tekrardan istek atarak bir değişkene atamak hız ve optimizasyon açısından doğru bir yöntem değildir. Bu yüzden bunları projenin içerisinde kullanım amaçlarına veya sürelerine göre kategorize ederek en uygun yöntemle depolamak, korumak ve ihtiyaç dâhilinde oradaki veriyi alarak tekrardan kullanabilmek isteriz.

Tam da burada bu gibi tekrar tekrar kullanılmak istenilen verileri depolamak için tercih edilen 3 farklı kavram devreye giriyor; sessionStorage, localStorage ve cookie. Peki, nedir bunlar yakından bir inceleyelim.

Tarayıcıda Veri Saklama Yöntemleri:  localStorage, sessionStorage ve Cookie 

sessionStorage Nedir, Nerelerde Kullanılır?

sessionStorage, tarayıcıda oturum süresince geçerli olan verileri depolamak için kullanılan bir web tarayıcı özelliğidir. Her bir tarayıcı sekmesi veya penceresi için ayrı ayrı depolama sağlar ve tarayıcı kapatıldığında bu veriler otomatik olarak silinir.

Bu depolama yöntemi, tarayıcıda geçici bilgilerin tutulmasını sağlar ve genellikle oturum süresi boyunca kullanılır. Yani, kullanıcı bir tarayıcı penceresi açtığında veya tarayıcıyı kapattığında sessionStorage'a yazılan veriler kaybolur.

Kullanım yerlerine göre sessionStorage avantajı ve dezavantajı değişebilir ama geçici verilerin tutulması senaryosuna göre şu şekilde sıralanabilir.

Avantajları;

-        Geçici verilerin depolanıp saklanabilmesini sağlarlar bu yüzden hafızayı yormazlar

-        5mb a kadar depolama alanlarına sahiptirler

-        sessionStorage'da saklanan veriler, kullanıcı bilgisayarında tutulur ve sunucuya gönderilmez. Bu nedenle, sunucu ile iletişim olmadan bilgilerin saklanması güvenli olabilir. 

-        Basit kullanım kolaylığı

Dezavantajları;

-        Sadece istemci tarafından okunabilir

-        Verileri string bir dizi şeklinde tutar

 

sessionStorage'a kullanım alanlarına örnekler olarak;

-        Geçici kullanıcı bilgilerin tutulması

-        Sadece sayfaya ve o an ki duruma özgü geçici durumlarda verilerin tutulması

-        Anlık kullanıcı girişlerinin tutulması ve bunların her oturumda sıfırlanılmasının istenilmesi

gibi geçici durumlarda kullanılabilmektedir.

localStorage Nedir, Nerelerde Kullanılır?  

‘localStorage’,  tarayıcı ön yüzünde saklanılması istenilen bilgilerin depolanması için kullanılan bir metottur. Bu metodun en önemli özelliği manuel olarak temizlenmediği süre boyunca hafızada kalıcı olarak saklanmasıdır. Kullanıcı tarayıcı penceresini veya sekmesini kapatsa bile, bu depolama alanına kaydedilen veriler belirli bir süre boyunca (genellikle kullanıcı tarafından elle temizlenmediği sürece) korunur. 

 

Avantajları;

-        Süresiz olarak depolanıp saklanabilirler

-        5mb a kadar depolama alanlarına sahiptirler

-        Veriler hiçbir zaman server tarafına aktarılmayacağı için daha güvenlidir.

Dezavantajları;

-        Sadece istemci tarafından okunabilir

-        Verileri string bir dizi şeklinde tutar

-        Kullanıcı veya program içerisinde silinmediğinde fazla yer kaplaması


 Localstorage kullanım alanlarına örnekler olarak;

-        Bir Todo List uygulamasında kullanıcının girdiği her bir ögenin bir sonraki açılışında tekrar getirilmesi,

-        Filtreli bir sorgulama sayfasında sorgulama verilerinin her zaman hafızada tutularak sayfaya tekrar gelindiğinde aynı sorgulamanın yapılabilmesi,        

 

Cookie Nedir, Nerelerde Kullanılır?

cookie (çerez), web tarayıcısı tarafından kullanıcının bilgisayarında saklanan küçük metin dosyalarıdır. Bu dosyalar, web siteleri tarafından tarayıcıya gönderilir ve tarayıcı tarafından kullanıcının bilgisayarında depolanır. Çerezler, özellikle kullanıcı oturum bilgilerini, tercihleri ve diğer kişisel bilgileri saklamak için kullanılır.

Cookiler aynı zamanda çapraz alan saklama özelliğine yani aynı kök alan adlarına sahip farklı web siteleri arasında da veri aktarımını sağlayabilecek özelliklere de sahiptir. 

Örn:  site1.com ile sub.site1.com arasında veri akışını sağlayabilirler.

 

Kullanım Yerleri:

Oturum Yönetimi:

Kullanıcı girişi durumunu takip etmek için çerezler kullanılır. Kullanıcı giriş yaptığında, sunucu bir çerez oluşturup tarayıcıya gönderir ve tarayıcı bu çerezi saklar. Bu sayede kullanıcının oturum bilgileri korunur ve tarayıcı penceresi kapatılsa bile kullanıcı girişi hatırlanır.

Kişiselleştirme:

Kullanıcının tercihlerini ve siteye özel ayarlarını saklamak için çerezler kullanılır. Örneğin, kullanıcının seçtiği dil, tema veya benzeri tercihler çerezler aracılığıyla saklanabilir.

Analitik Veri Toplama:

Çerezler, web sitesi kullanım istatistikleri toplamak için kullanılabilir. Google Analytics gibi analitik araçlar, çerezleri kullanarak ziyaretçi sayıları, sayfa görüntüleme sayıları ve benzeri verileri analiz eder.

Reklam Hedefleme:

Çerezler, kullanıcının web'deki gezinme alışkanlıkları üzerinden reklam hedefleme için kullanılabilir. Bu, reklam şirketlerine kullanıcının ilgi alanlarına göre reklam gösterme imkanı sağlar.

 

sessionStorage,localStorage ve Cookie Karşılaştırılması

  cookie localStorage sessionStorage
Boyut Sınırlamaları Genellikle 4 KB Genellikle 5 MB Genellikle 5 MB
Sunucu ile İletişim Otomatik gönderim, her HTTP isteğiyle

Sunucuya otomatik gönderim yok, sadece istemci tarafında saklanır Sunucuya otomatik gönderim yok, sadece istemci tarafında saklanır
Süre Kontrolü Belirli bir tarihte otomatik silinme (expires) Süre kontrolü yok, veriler elle temizlenene kadar kalıcıdır Tarayıcı penceresi veya sekmesi kapatıldığında otomatik silinir
Çapraz Alan Saklama Evet Hayır Hayır
Güvenlik Güvenlik sorunları olabilir, HTTPS kullanımı önemlidir Daha güvenli, HTTPS kullanımı önerilir Daha güvenli, HTTPS kullanımı önerilir
Kullanım Alanları Oturum yönetimi, tercihler, analitik veri Büyük veri depolama, sunucu ile bağımsız çalışma Geçici bilgilerin saklanması, tarayıcı penceresi açık olduğu sürece

Bu tablo, "cookie", "localStorage" ve "sessionStorage" arasındaki çeşitli özellikler ve işlevselliğe dair farklılıkları vurgular. Uygun depolama yönteminin seçimi, projenin belirli gereksinimleri ve hedefleri ile uyumlu olmalıdır.

Hatice AKSOY KILIÇ