Web Geliştirmede `localStorage` ile Tarayıcıda Veri Saklama Rehberi 
Selam dostlar! Uzun zamandır forumda takılıyorum ve sıkça karşılaştığım bir konuya değinmek istedim: "Kullanıcı tercihlerini veya basit verileri nasıl saklarız?" Tabii ki her şey için bir sunucu veritabanı kullanmak her zaman doğru değil. İşte tam bu noktada, localStorage imdadımıza yetişiyor. Bugün, bu basit ama güçlü Web API'sini birlikte inceleyeceğiz.
localStorage Nedir? Ne İşe Yarar?
Basitçe söylemek gerekirse, `localStorage` tarayıcınızda (istemci tarafında) anahtar-değer (key-value) çiftleri şeklinde veri saklamanızı sağlayan bir depolama alanıdır. Bu veriler:
Kullanım Alanları: Kullanıcı teması tercihi (açık/koyu mod), basit form verilerini geçici saklama, alışveriş sepeti içeriği (oturum bazlı değilse) veya küçük oyun kayıtları gibi senaryolarda harikadır. Ancak şifre, kredi kartı bilgisi gibi hassas verileri ASLA saklamamalısınız!
localStorage Nasıl Kullanılır? (Metotlar ve Örnekler)
Kullanımı son derece basittir. Sadece 4 temel metodu var. Hadi bir kullanıcının tercih ettiği dili saklayalım.
JSON ile Nesne ve Dizi Saklama
`localStorage` sadece string veri tipini saklayabilir. Peki ya bir nesne (object) veya dizi (array) saklamak istersek? İşte burada JSON devreye giriyor.
Dikkat Edilmesi Gerekenler ve Sınırlamalar
Pratik Bir Örnek: Koyu/Açık Tema Değiştirici
Hadi basit bir tema değiştirici yapalım ve localStorage ile kullanıcı tercihini hatırlatalım.
Ve tabii ki CSS'imizde `.koyu-tema` sınıfı arka plan ve yazı rengini değiştirecek.
Sonuç
`localStorage`, kullanıcı deneyimini kişiselleştirmek ve basit durum bilgilerini saklamak için mükemmel bir araçtır. Kullanımı kolay, hafif ve tarayıcı desteği çok yüksektir.
Ancak her teknolojide olduğu gibi, onun sınırlarını ve güvenlik risklerini bilmek önemlidir. Küçük, hassas olmayan veriler için harika, büyük veya gizli veriler için ise uygun değildir.
Umarım bu rehber işinize yarar. Takıldığınız bir yer olursa yorumlarda konuşalım! Bir sonraki yazıda görüşmek üzere, kodlamaya devam!
Selam dostlar! Uzun zamandır forumda takılıyorum ve sıkça karşılaştığım bir konuya değinmek istedim: "Kullanıcı tercihlerini veya basit verileri nasıl saklarız?" Tabii ki her şey için bir sunucu veritabanı kullanmak her zaman doğru değil. İşte tam bu noktada, localStorage imdadımıza yetişiyor. Bugün, bu basit ama güçlü Web API'sini birlikte inceleyeceğiz.
localStorage Nedir? Ne İşe Yarar?
Basitçe söylemek gerekirse, `localStorage` tarayıcınızda (istemci tarafında) anahtar-değer (key-value) çiftleri şeklinde veri saklamanızı sağlayan bir depolama alanıdır. Bu veriler:
- Sayfayı yenilediğinizde veya tarayıcıyı kapattığınızda kaybolmaz.
- Aynı web sitesine farklı bir sekmeden girdiğinizde erişilebilir.
- Sunucuya gönderilmez, tamamen sizin bilgisayarınızda kalır.
- Yaklaşık 5-10 MB arasında bir depolama sınırı vardır (tarayıcıya göre değişir).
Kullanım Alanları: Kullanıcı teması tercihi (açık/koyu mod), basit form verilerini geçici saklama, alışveriş sepeti içeriği (oturum bazlı değilse) veya küçük oyun kayıtları gibi senaryolarda harikadır. Ancak şifre, kredi kartı bilgisi gibi hassas verileri ASLA saklamamalısınız!
localStorage Nasıl Kullanılır? (Metotlar ve Örnekler)
Kullanımı son derece basittir. Sadece 4 temel metodu var. Hadi bir kullanıcının tercih ettiği dili saklayalım.
- Veri Kaydetmek (.setItem()):
`localStorage.setItem('anahtar', 'deger');`
Örnek: `localStorage.setItem('tercihEdilenDil', 'tr');`
Bu, `tercihEdilenDil` anahtarına `tr` değerini kaydeder.
- Veri Okumak (.getItem()):
`const deger = localStorage.getItem('anahtar');`
Örnek: `const dil = localStorage.getItem('tercihEdilenDil');`
`console.log(dil); // "tr" yazdırır. Eğer anahtar yoksa `null` döner.
- Belirli Bir Veriyi Silmek (.removeItem()):
`localStorage.removeItem('anahtar');`
Örnek: `localStorage.removeItem('tercihEdilenDil');`
Artık bu anahtarla ilişkili veri silinir.
- Tüm Verileri Temizlemek (.clear()):
`localStorage.clear();`
Dikkat! Bu, o alan adı için kaydettiğiniz tüm verileri siler. Kullanırken iki kere düşünün.
JSON ile Nesne ve Dizi Saklama
`localStorage` sadece string veri tipini saklayabilir. Peki ya bir nesne (object) veya dizi (array) saklamak istersek? İşte burada JSON devreye giriyor.
- Nesneyi Saklama: Nesneyi JSON string'ine çevirip kaydederiz.
Kod:const kullaniciAyarlari = { tema: 'koyu', bildirim: true, dil: 'tr' }; localStorage.setItem('ayarlar', JSON.stringify(kullaniciAyarlari)); - Nesneyi Okuma: String'i geri nesneye çeviririz.
Kod:const kayitliAyarlar = localStorage.getItem('ayarlar'); if (kayitliAyarlar) { const ayarlarNesnesi = JSON.parse(kayitliAyarlar); console.log(ayarlarNesnesi.tema); // "koyu" }
Dikkat Edilmesi Gerekenler ve Sınırlamalar
- Güvenlik: Tekrar söylüyorum, hassas veri saklamayın. Verilere tarayıcı geliştirici araçlarından (Application sekmesi) kolayca erişilebilir.
- Senkron Çalışır: localStorage işlemleri senkron (sıralı) çalışır. Çok büyük verilerle uğraşıyorsanız ana iş parçacığını (main thread) bloklayabilir. Bu durumda IndexedDB gibi asenkron çözümler düşünülmelidir.
- String Depolama: Her şey string'e dönüştürülür. Sayı saklasanız bile, okuduğunuzda string olarak gelir. Dönüşümü manuel yapmanız gerekebilir.
- Private/Incognito Mod: Bazı tarayıcılarda gizli modda, sayfa kapandığında localStorage temizlenebilir. Buna güvenerek kritik mantık kurmayın.
Pratik Bir Örnek: Koyu/Açık Tema Değiştirici
Hadi basit bir tema değiştirici yapalım ve localStorage ile kullanıcı tercihini hatırlatalım.
Kod:
// HTML: <button id="temaDegistir">Temayı Değiştir</button>
const temaButonu = document.getElementById('temaDegistir');
const body = document.body;
// Sayfa yüklendiğinde kayıtlı temayı kontrol et
const kayitliTema = localStorage.getItem('siteTemasi');
if (kayitliTema === 'koyu') {
body.classList.add('koyu-tema');
}
// Butona tıklanınca temayı değiştir ve kaydet
temaButonu.addEventListener('click', () => {
body.classList.toggle('koyu-tema');
if (body.classList.contains('koyu-tema')) {
localStorage.setItem('siteTemasi', 'koyu');
} else {
localStorage.setItem('siteTemasi', 'acik');
}
});Ve tabii ki CSS'imizde `.koyu-tema` sınıfı arka plan ve yazı rengini değiştirecek.
Sonuç
`localStorage`, kullanıcı deneyimini kişiselleştirmek ve basit durum bilgilerini saklamak için mükemmel bir araçtır. Kullanımı kolay, hafif ve tarayıcı desteği çok yüksektir.
Ancak her teknolojide olduğu gibi, onun sınırlarını ve güvenlik risklerini bilmek önemlidir. Küçük, hassas olmayan veriler için harika, büyük veya gizli veriler için ise uygun değildir.
Umarım bu rehber işinize yarar. Takıldığınız bir yer olursa yorumlarda konuşalım! Bir sonraki yazıda görüşmek üzere, kodlamaya devam!