LocalStorage Nedir? Nasıl Kullanılır?
Merhaba! Bu makalede, web geliştirme dünyasında önemli bir araç olan LocalStorage'ı ele alacağız. Bu yazı, başlangıç seviyesinde öğrenmek isteyenler için hazırlanmıştır. Adım adım açıklayarak, ne olduğunu, nasıl çalıştığını, nerelerde kullanıldığını ve basit örnekler vereceğiz.
LocalStorage Nedir?
LocalStorage, web tarayıcılarının sunduğu bir depolama mekanizmasıdır. HTML5 ile gelen Web Storage API'sinin bir parçasıdır. Bu araç, web sitelerinin veya uygulamalarının kullanıcıların tarayıcısında veri saklamasına olanak tanır. Veriler, anahtar-değer (key-value) çiftleri şeklinde tutulur ve tarayıcı kapatılıp açılsa bile silinmez – yani kalıcıdır.
LocalStorage, tarayıcının "origin"ine (yani aynı domain, protokol ve porta) bağlıdır. Farklı siteler birbirlerinin verilerine erişemez, bu da güvenlik sağlar. Her origin için yaklaşık 5-10 MB depolama alanı vardır, bu da küçük veriler için idealdir (örneğin, kullanıcı tercihleri veya form verileri).
LocalStorage vs. SessionStorage
LocalStorage ile benzer bir araç olan SessionStorage'ı karıştırmamak önemli. SessionStorage da aynı şekilde çalışır, ancak veriler sadece tarayıcı sekmesi açıkken kalır. Sekme kapatıldığında veriler silinir. LocalStorage ise tarayıcı yeniden başlatılsa bile veriyi korur.
LocalStorage Nasıl Çalışır?
LocalStorage'ı kullanmak için JavaScript kodları yazmanız yeterlidir. İşte temel yöntemler:
- setItem(key, value): Bir anahtar-değer çifti ekler veya günceller. Değer her zaman string olarak saklanır, bu yüzden nesneleri JSON.stringify ile dönüştürmeniz gerekebilir.
- getItem(key): Belirtilen anahtara ait değeri getirir. Eğer yoksa null döner.
- removeItem(key): Belirtilen anahtarı siler.
- clear(): Tüm verileri temizler.
- key(index): Depolanan anahtarları sırayla getirir (indeks bazlı).
- length: Depolanan öğe sayısını verir.
Bu yöntemler, window.localStorage nesnesi üzerinden çağrılır. Örneğin:
// Veri ekleme
localStorage.setItem('kullaniciAdi', 'Ahmet');
// Veri alma
let ad = localStorage.getItem('kullaniciAdi');
console.log(ad); // "Ahmet" yazdırır
// Veri silme
localStorage.removeItem('kullaniciAdi');
// Tümünü temizleme
localStorage.clear();Eğer bir nesne saklamak isterseniz:
let kullanici = { ad: 'Ahmet', yas: 25 };
localStorage.setItem('kullaniciBilgisi', JSON.stringify(kullanici));
let alinan = JSON.parse(localStorage.getItem('kullaniciBilgisi'));
console.log(alinan.ad); // "Ahmet"Bu örnekler, LocalStorage'ın basitliğini gösterir.
LocalStorage Nerelerde Kullanılır?
LocalStorage, web uygulamalarında birçok senaryoda faydalıdır. İşte bazı yaygın kullanım alanları:
- Kullanıcı Tercihleri Saklama: Karanlık mod tercihi, dil seçimi gibi ayarlar. Sayfa yenilendiğinde aynı kalır.
- Form Verileri: Kullanıcı bir form doldururken, verileri geçici olarak saklayarak sayfa yenilenirse kaybolmamasını sağlamak.
- Çevrimdışı Uygulamalar: Progressive Web Apps (PWA) için veri önbellekleme, internet kesilse bile erişim.
- Oyun Durumları: Basit oyunlarda skor veya seviye bilgilerini tutmak.
- Alışveriş Sepeti: E-ticaret sitelerinde, kullanıcı giriş yapmadan sepeti saklamak.
Ancak, hassas veriler (şifreler gibi) için uygun değildir, çünkü tarayıcıda düz metin olarak saklanır ve JavaScript ile erişilebilir.
Avantajlar ve Dezavantajlar
Avantajlar:
- Kolay kullanım: Sadece JavaScript ile erişim.
- Kalıcı: Tarayıcı kapanınca silinmez.
- Çerezlere göre daha fazla depolama alanı.
- Sunucu yükünü azaltır (veri istemci tarafında kalır).
Dezavantajlar:
- Güvenlik: XSS saldırılarında erişilebilir, bu yüzden şifre gibi veriler için kullanmayın.
- Boyut sınırı: 5-10 MB ile sınırlı.
- Senkron çalışma: Büyük verilerde performansı etkileyebilir.
- Tarayıcıya bağımlı: Farklı tarayıcılarda veri paylaşılmaz.
Eğer daha büyük veya güvenli depolama ihtiyacınız varsa, IndexedDB gibi alternatiflere bakabilirsiniz.
Pratik Örnek: Basit Bir Uygulama
Haydi, bir HTML sayfası ile LocalStorage'ı deneyelim. Aşağıdaki kodu bir HTML dosyasına kopyalayın ve tarayıcıda açın:
<!DOCTYPE html>
<html>
<head>
<title>LocalStorage Örneği</title>
</head>
<body>
<input type="text" id="veri" placeholder="Bir değer girin">
<button onclick="kaydet()">Kaydet</button>
<button onclick="oku()">Oku</button>
<p id="sonuc"></p>
<script>
function kaydet() {
let deger = document.getElementById('veri').value;
localStorage.setItem('ornekVeri', deger);
alert('Kaydedildi!');
}
function oku() {
let alinan = localStorage.getItem('ornekVeri');
document.getElementById('sonuc').innerText = alinan || 'Veri yok';
}
</script>
</body>
</html>Bu kodda, bir metin girip "Kaydet"e basın. Sayfayı yenileyin ve "Oku"ya basın – veri hala orada!
Sonuç
LocalStorage, web geliştiriciler için basit ve etkili bir araçtır. Küçük verileri tarayıcıda saklamak için mükemmeldir. Pratik yaparak daha iyi öğreneceksiniz. Eğer sorularınız olursa, yorum bırakın!
Kaynakçalar
Bu makale, aşağıdaki güvenilir kaynaklardan derlenmiştir:
- MDN Web Docs: Window.localStorage
- W3Schools: HTML Web Storage API
- LogRocket Blog: localStorage in A complete guide
- YouTube: Local Storage in 5 minutes
- Reddit: Using localStorage in Modern Applications
- DEV Community: Mastering Local Storage in Web Development
- RxDB: Using localStorage in Modern Applications
- JavaScript.info: LocalStorage, sessionStorage
- freeCodeCamp: How to Use LocalStorage in JavaScript
