Yerel Depolama ve Oturum Depolaması
Yerel Depolama (Local Storage) ve Oturum Depolaması (Session Storage), JavaScript ile web uygulamalarında kullanıcıya özel verileri tarayıcı üzerinde saklamamızı sağlayan güçlü araçlardır. Yerel Depolama, kullanıcı verilerini kalıcı olarak saklarken, Oturum Depolaması yalnızca aktif oturum süresince veri tutar ve sekme kapatıldığında silinir. Bu mekanizmalar, kişisel web sitelerinde kullanıcı tercihlerini hatırlamak, bloglarda geçici form verilerini korumak, e-ticaret sitelerinde sepet bilgilerini yönetmek veya haber sitelerinde ziyaretçi tercihlerini depolamak gibi senaryolarda son derece kullanışlıdır.
Bu eğitimde okuyucu, veri ekleme, okuma, güncelleme ve silme işlemlerini hem Yerel Depolama hem de Oturum Depolaması üzerinde uygulamalı olarak öğrenecektir. Ayrıca JSON ile nesne ve dizileri saklama, hata yönetimi ve performans optimizasyonu konularına değinilecektir. Yerel Depolamayı bir evin kalıcı dolabı, Oturum Depolamayı ise geçici olarak kullanılan masadaki defter gibi düşünebilirsiniz; bazı bilgiler kalıcıdır, bazıları ise yalnızca o anki işlem için geçicidir. Bu metaforlar, veri saklama stratejilerini anlamanızı ve uygulamanızı kolaylaştıracaktır.
Temel Örnek
javascript// Basic Local Storage and Session Storage operations
// Save user name in Local Storage
localStorage.setItem('username', 'Murat');
// Retrieve the stored username
const user = localStorage.getItem('username');
console.log('Stored username:', user);
// Remove a specific item
localStorage.removeItem('username');
// Clear all Local Storage data
localStorage.clear();Yukarıdaki örnekte localStorage.setItem() ile "Murat" kullanıcı adı kalıcı olarak saklanır. setItem() metodu iki parametre alır: anahtar (key) ve değer (value). getItem() ile kaydedilen veri anahtar kullanılarak okunur. removeItem() belirli bir öğeyi silerken, clear() tüm depolamayı temizler. Yerel Depolama ve Oturum Depolaması yalnızca metin (string) verileri sakladığından, nesne veya dizileri saklamak için JSON.stringify() ile serileştirme, JSON.parse() ile okuma sırasında yeniden nesneye dönüştürme gereklidir. Bu yöntem, örneğin e-ticaret sepeti veya blog form verilerini yönetirken oldukça faydalıdır.
Pratik Örnek
javascript// Practical example: saving theme preference on a personal website
const themeSelector = document.getElementById('theme');
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
document.body.className = savedTheme; // Apply saved theme
}
// Listen for theme changes
themeSelector.addEventListener('change', (e) => {
const selectedTheme = e.target.value;
document.body.className = selectedTheme;
localStorage.setItem('theme', selectedTheme); // Save preference
});
// Session Storage example: temporarily store login state
sessionStorage.setItem('loggedIn', 'true');
console.log('Login state:', sessionStorage.getItem('loggedIn'));Pratik örnekte, kullanıcı tercihi olan tema bilgisi Yerel Depolama ile kaydedilir. Sayfa yüklendiğinde getItem() ile veri okunur ve body elementine uygulanır, böylece kullanıcı arayüzü tutarlı kalır. themeSelector üzerinde change eventi dinlenerek tema değişikliği hem görünümü hem de depolamayı günceller; bu, odanızı yeniden dekore etmek ve yaptığınız değişiklikleri kalıcı olarak kaydetmek gibidir.
Oturum Depolaması, login durumunu geçici olarak saklamak için kullanılır. sessionStorage.setItem() ile değer atanır ve sekme kapandığında otomatik olarak silinir. Bu sayede bloglar, haber siteleri ve e-ticaret uygulamalarında geçici veri yönetimi kolaylaşır.
En iyi uygulamalar arasında: nesneleri JSON.stringify() ile saklamak, tarayıcı uyumluluğunu kontrol etmek, benzersiz anahtarlar kullanmak ve gereksiz verileri periyodik olarak temizlemek yer alır. Sık yapılan hatalar ise: fazla büyük veri depolamak, eski tarayıcılarda hata yönetimi yapmamak, event yönetimini yanlış yapmak ve veri kontrolü yapmadan okumaktır. Debug için try/catch blokları, null kontrolü ve tarayıcı geliştirici araçları kullanılabilir. Yerel ve Oturum Depolamayı doğru planlayarak uygulamanızın performansını ve kullanıcı deneyimini optimize edebilirsiniz.
📊 Hızlı Referans
| Property/Method | Description | Example |
|---|---|---|
| setItem(key, value) | Bir değer kaydeder | localStorage.setItem('theme','dark') |
| getItem(key) | Bir değeri anahtar ile okur | const theme = localStorage.getItem('theme') |
| removeItem(key) | Belirli bir öğeyi siler | localStorage.removeItem('theme') |
| clear() | Tüm verileri temizler | localStorage.clear() |
| JSON.stringify(value) | Nesne/diziyi stringe çevirir | localStorage.setItem('cart',JSON.stringify(\[{id:1}])) |
| JSON.parse(value) | Stringi tekrar nesne/diziye çevirir | const cart = JSON.parse(localStorage.getItem('cart')) |
Özetle, Yerel Depolama ve Oturum Depolaması, kullanıcı verilerini yönetmek için güçlü araçlardır. Yerel Depolama, kalıcı kullanıcı ayarları ve tercihler için idealken, Oturum Depolaması geçici bilgiler için uygundur. HTML DOM ile etkileşim ve backend iletişimi ile birleştiğinde dinamik ve kullanıcı odaklı arayüzler oluşturulabilir. Sonraki adımlar olarak IndexedDB, güvenli istemci depolama ve performans optimizasyonunu çalışmak önerilir. Pratik uygulamalar, veri yaşam döngüsünü anlamayı ve kompleks web uygulamaları geliştirmeyi kolaylaştırır.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu konudaki anlayışınızı pratik sorularla test edin.
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek