Günümüzün modern web uygulamaları, kullanıcı deneyimini zenginleştirmek ve veri tutarlılığını sağlamak için tarayıcı üzerinde veri depolamaya ihtiyaç duyar. Geleneksel olarak bu amaçla Çerezler (Cookies) kullanılmaktaydı. Ancak HTML5 ile birlikte tanıtılan LocalStorage ve SessionStorage API’leri, çerezlere kıyasla daha esnek, daha geniş kapasiteli ve daha kolay yönetilebilir alternatifler sunmuştur. Bu depolama mekanizmaları, kullanıcı tercihleri (örneğin koyu mod), alışveriş sepeti içeriği veya form verileri gibi bilgileri istemci tarafında güvenli ve verimli bir şekilde saklamak için idealdir. Bu makalede, LocalStorage ve SessionStorage kavramlarını derinlemesine inceleyecek, aralarındaki temel farkları, kullanım alanlarını ve JavaScript ile nasıl entegre edildiklerini basit örneklerle açıklayacağız.
Web’de veri depolama: çerezlerden yeni nesil çözümlere
Web siteleri, başlangıcından bu yana kullanıcılarla ilgili bilgileri hatırlamak için çeşitli yöntemler kullanmıştır. Bu yöntemlerin başında, sunucu tarafından oluşturulan ve tarayıcıda saklanan küçük metin dosyaları olan Çerezler (Cookies) gelir. Çerezler, kullanıcı oturumlarını yönetmek, kişiselleştirilmiş deneyimler sunmak ve kullanıcı izleme gibi pek çok amaç için kullanılır. Ancak çerezlerin bazı önemli sınırlamaları bulunmaktadır:
- Boyut Sınırlaması: Genellikle 4 KB ile sınırlıdırlar, bu da büyük miktarda veri depolamak için yetersizdir.
- Sunucuya Gönderim: Her HTTP isteği ile otomatik olarak sunucuya gönderilirler, bu da bant genişliği tüketimini artırabilir ve performansı etkileyebilir.
- API Karmaşıklığı: Çerezleri JavaScript ile yönetmek, LocalStorage ve SessionStorage’a göre daha zahmetlidir ve özel fonksiyonlar gerektirebilir.
- Güvenlik Endişeleri: Çapraz site istek sahteciliği (CSRF) gibi saldırılara karşı dikkatli olunması gerekir.
Bu sınırlamalar nedeniyle, HTML5 ile birlikte daha modern ve güçlü istemci tarafı depolama çözümleri olan Web Storage API (LocalStorage ve SessionStorage) tanıtıldı. Bu yeni nesil çözümler, çerezlerin getirdiği kısıtlamaları aşarak geliştiricilere daha geniş imkanlar sunmuştur.
Localstorage ve sessionstorage’ın farkları ve kullanım alanları
LocalStorage ve SessionStorage, tarayıcıda anahtar-değer çiftleri şeklinde veri saklamak için kullanılan iki temel Web Storage API nesnesidir. Her ikisi de aynı API’yi paylaşsa da, verilerin kalıcılığı ve erişilebilirlik açısından önemli farklılıkları vardır:
Localstorage (yerel depolama)
LocalStorage, verileri tarayıcıda kalıcı olarak saklamak için tasarlanmıştır. Bu, kullanıcının tarayıcıyı kapatıp açsa bile verilerin kaybolmayacağı anlamına gelir. Veriler, kullanıcı manuel olarak silene, tarayıcı önbelleğini temizleyene veya web sitesi JavaScript ile silene kadar orada kalır.
- Kalıcılık: Kalıcıdır. Tarayıcı kapatılıp açılsa bile veriler korunur.
- Kapasite: Genellikle 5 MB ile 10 MB arasında bir depolama alanına sahiptir (tarayıcıya göre değişir).
- Erişilebilirlik: Aynı origin (protokol, ana bilgisayar ve port) içinde açılan tüm pencereler ve sekmeler tarafından erişilebilir.
- Kullanım Alanları: Koyu mod/açık mod tercihleri, dil seçimleri, kullanıcı ayarları, otomatik giriş bilgileri (hassas olmayanlar), kullanıcıların belirli bir siteye geri döndüklerinde sepetlerinde kalmasını istedikleri alışveriş sepeti içerikleri, çevrimdışı uygulamalar için verileri önbelleğe alma.
Sessionstorage (oturum depolama)
SessionStorage, verileri yalnızca mevcut tarayıcı oturumu boyunca saklar. Bu, kullanıcı belirli bir tarayıcı sekmesini veya penceresini kapattığında, o sekmeye veya pencereye ait tüm SessionStorage verilerinin otomatik olarak silineceği anlamına gelir. Her yeni sekme veya pencere, kendi izole SessionStorage örneğine sahip olur.
- Kalıcılık: Oturum bazlıdır. Tarayıcı sekmesi veya penceresi kapatıldığında veriler silinir. Sayfa yenilendiğinde veriler korunur.
- Kapasite: LocalStorage ile benzer şekilde genellikle 5 MB ile 10 MB arasında bir depolama alanına sahiptir.
- Erişilebilirlik: Yalnızca verinin oluşturulduğu tarayıcı sekmesi veya penceresi içinde erişilebilir. Farklı bir sekmede aynı siteyi açsanız bile, o sekmenin kendi ayrı SessionStorage’ı olacaktır.
- Kullanım Alanları: Çok adımlı formlarda geçici verileri saklama, kullanıcının bir alışveriş oturumu boyunca sepetine eklediği ürünler (oturum bazlı), geçici kullanıcı tercihleri, kullanıcı gezinti geçmişi boyunca korunması gereken durum bilgileri.
Her iki depolama türü de verileri anahtar-değer çiftleri olarak saklar ve bu değerler her zaman string (metin) olmak zorundadır. Bu nedenle, nesne veya dizi gibi karmaşık veri yapılarını saklamak için JSON.stringify() ile metne dönüştürülmeleri ve geri okunurken JSON.parse() ile tekrar orijinal hallerine getirilmelidirler.
JavaScript ile veri yönetimi: basit örnekler
LocalStorage ve SessionStorage, JavaScript’in window nesnesi üzerinden erişilebilen global nesnelerdir. Veri eklemek, okumak, güncellemek veya silmek için dört temel yöntem kullanılır:
setItem(key, value): Bir anahtar-değer çifti kaydeder veya günceller.getItem(key): Belirtilen anahtara karşılık gelen değeri döndürür.removeItem(key): Belirtilen anahtara karşılık gelen veriyi siler.clear(): Depolamadaki tüm anahtar-değer çiftlerini siler.
Aşağıda, koyu mod tercihi ve basit bir sepet içeriği yönetimini gösteren JavaScript ve HTML örnekleri bulunmaktadır:
1. Koyu mod tercihi (Localstorage ile)
Kullanıcının koyu mod tercihini kalıcı olarak kaydetmek için LocalStorage kullanabiliriz.
HTML Yapısı:
<body>
<h4>Koyu mod tercihi</h4>
<p>Tercihiniz: <b id=”temaTercihi”></b></p>
<button id=”temaDegistir”>Temayı Değiştir</button>
<script>
// JavaScript kodu buraya gelecek
</script>
</body>
JavaScript Kodu:
const temaDegistirButonu = document.getElementById(‘temaDegistir’);
const temaTercihiMetni = document.getElementById(‘temaTercihi’);
function temayiUygula(tema) {
document.body.className = tema;
temaTercihiMetni.textContent = tema === ‘dark’ ? ‘Koyu’ : ‘Açık’;
}
// Sayfa yüklendiğinde LocalStorage’daki tercihi kontrol et
const kaydedilenTema = localStorage.getItem(‘siteTemasi’);
if (kaydedilenTema) {
temayiUygula(kaydedilenTema);
} else {
temayiUygula(‘light’); // Varsayılan tema
}
// Butona tıklandığında temayı değiştir ve LocalStorage’a kaydet
temaDegistirButonu.addEventListener(‘click’, () => {
const mevcutTema = document.body.className === ‘dark’ ? ‘light’ : ‘dark’;
temayiUygula(mevcutTema);
localStorage.setItem(‘siteTemasi’, mevcutTema);
});
Bu örnekte, kullanıcı “Temayı Değiştir” düğmesine tıkladığında, mevcut tema (koyu veya açık) kontrol edilir, tersine çevrilir ve localStorage.setItem() kullanılarak kaydedilir. Sayfa yüklendiğinde ise localStorage.getItem() ile kaydedilmiş bir tema olup olmadığı kontrol edilir ve varsa uygulanır.
2. Basit sepet içeriği (Sessionstorage veya Localstorage ile)
Bu örnekte, sepet içeriğini LocalStorage’da tutarak kullanıcı tarayıcıyı kapatsa bile ürünlerin sepetinde kalmasını sağlayacağız. Eğer sepetin sadece mevcut oturumda geçerli olması isteniyorsa, localStorage yerine sessionStorage kullanılabilir.
HTML Yapısı:
<body>
<h4>Alışveriş sepeti</h4>
<input type=”text” id=”urunAdi” placeholder=”Ürün adı”>
<button id=”sepeteEkle”>Sepete Ekle</button>
<button id=”sepetiTemizle”>Sepeti Temizle</button>
<ul id=”sepetListesi”>
<!– Sepet içeriği buraya gelecek –>
</ul>
<script>
// JavaScript kodu buraya gelecek
</script>
</body>
JavaScript Kodu:
const urunAdiInput = document.getElementById(‘urunAdi’);
const sepeteEkleButonu = document.getElementById(‘sepeteEkle’);
const sepetiTemizleButonu = document.getElementById(‘sepetiTemizle’);
const sepetListesi = document.getElementById(‘sepetListesi’);
function sepetiGoster() {
sepetListesi.innerHTML = ”;
const sepetJSON = localStorage.getItem(‘alisverisSepeti’);
const sepet = sepetJSON ? JSON.parse(sepetJSON) : [];
sepet.forEach(urun => {
const listItem = document.createElement(‘li’);
listItem.textContent = urun;
sepetListesi.appendChild(listItem);
});
}
// Sayfa yüklendiğinde sepeti göster
sepetiGoster();
// Sepete ürün ekle
sepeteEkleButonu.addEventListener(‘click’, () => {
const yeniUrun = urunAdiInput.value.trim();
if (yeniUrun) {
const sepetJSON = localStorage.getItem(‘alisverisSepeti’);
const sepet = sepetJSON ? JSON.parse(sepetJSON) : [];
sepet.push(yeniUrun);
localStorage.setItem(‘alisverisSepeti’, JSON.stringify(sepet));
urunAdiInput.value = ”;
sepetiGoster();
}
});
// Sepeti temizle
sepetiTemizleButonu.addEventListener(‘click’, () => {
localStorage.removeItem(‘alisverisSepeti’); // veya localStorage.clear();
sepetiGoster();
});
Bu örnekte, sepet içeriği bir dizi olarak saklanır. Ancak LocalStorage sadece string değerler alabildiğinden, dizi JSON.stringify() ile metne dönüştürülerek kaydedilir ve geri okunurken JSON.parse() ile tekrar diziye çevrilir. Bu sayede karmaşık veri yapıları da LocalStorage’da güvenle saklanabilir.
LocalStorage ve SessionStorage, basit anahtar-değer depolama mekanizmaları sunarak istemci tarafında veri yönetimini büyük ölçüde basitleştirmiştir. Doğru senaryoda doğru depolama çözümünü seçmek, web uygulamanızın performansını ve kullanıcı deneyimini doğrudan etkileyecektir.
Tarayıcıda veri depolama, modern web uygulamalarının temelini oluşturan kritik bir özelliktir. Çerezler uzun yıllar boyunca bu alanda hizmet vermiş olsa da, HTML5 ile birlikte gelen LocalStorage ve SessionStorage API’leri, geliştiricilere daha güçlü ve esnek alternatifler sunmuştur. Bu makalede, bu iki önemli depolama mekanizmasını ele alarak, aralarındaki temel farkları ve kullanım senaryolarını ayrıntılı bir şekilde inceledik. LocalStorage’ın verileri kalıcı olarak saklama yeteneği, kullanıcıların koyu mod tercihleri veya alışveriş sepeti gibi bilgilerini tarayıcı kapatıldıktan sonra bile korumak için idealdir. SessionStorage ise, verileri yalnızca mevcut tarayıcı oturumu boyunca saklayarak, çok adımlı form verileri veya oturum bazlı geçici bilgiler için mükemmel bir çözüm sunar. Her ikisi de çerezlerin boyut ve bant genişliği sınırlamalarını ortadan kaldırarak, daha büyük veri kümelerinin kolayca yönetilmesini sağlar. JavaScript ile basit API’leri sayesinde veri eklemek, okumak ve silmek oldukça kolaydır. Sonuç olarak, LocalStorage ve SessionStorage, web geliştiricilerine kullanıcı deneyimini kişiselleştirmek ve verimliliği artırmak için güçlü araçlar sunarak, çerezlerin ötesine geçen modern bir depolama çözümü haline gelmiştir. Hangi depolama çözümünün kullanılacağı, saklanacak verinin kalıcılık ve erişilebilirlik gereksinimlerine göre dikkatle belirlenmelidir.
Resim Sahibi: Markus Spiske
https://www.pexels.com/@markusspiske