crazy_coder
Moderatör
- Katılım
- 20 Şub 2026
- Mesajlar
- 204
- Tepkime puanı
- 0
- Puanları
- 16
1. Web Storage Nedir?
Web Storage, verilerin anahtar-değer (key-value) çiftleri şeklinde, doğrudan kullanıcının tarayıcısında saklanmasına olanak tanır. Eskiden kullanılan Cookie'lere (çerezler) göre çok daha yüksek kapasite (yaklaşık 5-10 MB) sunar ve sunucuya her istekte gönderilmediği için daha performanslıdır.
2. Local Storage vs Session Storage
İkisi de neredeyse aynı komutlarla çalışır, ancak verinin "yaşam süresi" konusunda ayrılırlar:
[]Local Storage: Veriler siz manuel olarak silene kadar tarayıcıda kalır. Tarayıcı kapansa da, bilgisayar yeniden başlatılsa da veriler silinmez.
[]Session Storage: Veriler sadece mevcut sekme (oturum) açık kaldığı sürece yaşar. Sekme kapatıldığı anda veriler otomatik olarak silinir.
3. Temel Kullanım Yöntemleri
Her iki yöntem için de kullanılan dört temel fonksiyon vardır (Örnekler localStorage üzerindendir):
A. Veri Kaydetme (setItem)
JavaScript:
// localStorage.setItem("anahtar", "değer");
localStorage.setItem("tema", "karanlık");
localStorage.setItem("kullanıcıAdı", "GeminiUser");B. Veri Okuma (getItem)
JavaScript:
const temaTercihi = localStorage.getItem("tema");
console.log(temaTercihi); // Çıktı: "karanlık"C. Veri Silme (removeItem)
JavaScript:
localStorage.removeItem("tema"); // Sadece "tema" anahtarını silerD. Tüm Verileri Temizleme (clear)
JavaScript:
localStorage.clear(); // O domaine ait tüm storage verilerini süpürür4. Kritik Nokta: Obje ve Dizileri Saklamak
Web Storage sadece String (Metin) tipinde veri saklayabilir. Eğer bir objeyi veya diziyi doğrudan saklamaya çalışırsanız hata almazsınız ama veriniz "[object Object]" şeklinde bozulur. Bunu önlemek için JSON formatını kullanmalıyız.
JavaScript:
const kullanıcı = { id: 1, ad: "Ahmet", yetki: "Admin" };
// Kaydederken stringe çeviriyoruz
localStorage.setItem("aktif_user", JSON.stringify(kullanıcı));
// Okurken tekrar objeye çeviriyoruz
const gelenVeri = localStorage.getItem("aktif_user");
const kullanıcıObjesi = JSON.parse(gelenVeri);
console.log(kullanıcıObjesi.ad); // Ahmet5. Güvenlik Uyarıları (Önemli!)
Web Storage kullanırken şu iki kuralı asla unutmamalısınız:
[]Hassas Veri Saklamayın: Şifreler, kredi kartı bilgileri veya kritik oturum (session) token'ları asla localStorage'da saklanmamalıdır. Çünkü herhangi bir XSS saldırısı ile bu verilere JavaScript üzerinden kolayca erişilebilir.
[]Boyut Sınırı: Çok büyük verileri buraya doldurmak tarayıcı performansını etkileyebilir. Sadece küçük ayarlar ve tercihler için kullanın.
Pratik Uygulama: Karanlık Mod Tercihini Hatırlatma
JavaScript:
const themeToggle = document.querySelector("#theme-btn");
// Sayfa yüklendiğinde eski tercihi kontrol et
const mevcutTema = localStorage.getItem("tema");
if (mevcutTema === "dark") {
document.body.classList.add("dark-mode");
}
// Butona tıklandığında hem değiştir hem kaydet
themeToggle.addEventListener("click", () => {
document.body.classList.toggle("dark-mode");
if (document.body.classList.contains("dark-mode")) {
localStorage.setItem("tema", "dark");
} else {
localStorage.setItem("tema", "light");
}
});Sonuç
Local Storage ve Session Storage, kullanıcı deneyimini iyileştirmek için harika araçlardır. Kullanıcının dil tercihini, sepetindeki ürünleri veya arayüz ayarlarını hatırlayarak onlara daha kişiselleştirilmiş bir web deneyimi sunmanıza olanak tanır.