localStorage temelleri

localStorage ile tarayıcıda kalıcı anahtar-değer çifti saklamayı öğrenirsin.

localStorage nedir?

localStorage, tarayıcıda anahtar-değer çifti saklayan kalıcı bir depodur. Kaydettiğin veriler sayfa yenilenince veya tarayıcı kapatılınca kaybolmaz; yalnızca JavaScript ile silersen ya da kullanıcı veriyi temizlerse silinir.

Bir veri kaydetmek için setItem metodunu kullanırsın: anahtar ve değer olmak üzere iki metin parametre alır.

localStorage.setItem('theme', 'dark');

Bu satır 'theme' anahtarına 'dark' değerini koyar. Aynı anahtara tekrar yazarsan eski değerin üzerine yazar.

getItem ile okuma

Kaydettiğin veriyi okumak için getItem metodunu kullanırsın. Anahtarı parametre olarak verirsin; metod o anahtara ait değeri metin olarak döndürür.

const theme = localStorage.getItem('theme');

Eğer anahtar daha önce kaydedilmemişse getItem null döndürür. Bu yüzden okuduğun değeri kullanmadan önce null mı diye kontrol etmek iyi bir alışkanlıktır.

Uygulama Bir şehri kaydet ve geri oku

'city' anahtarına 'İzmir' değerini setItem ile kaydet. Sonra getItem ile bu değeri city değişkenine oku.

Örnek çözümü göster

localStorage.setItem('city', 'İzmir');
const city = localStorage.getItem('city');

Kendini test et

Hangisi 'lang' anahtarına 'tr' değerini kaydeder?

// A
localStorage.set('lang', 'tr');
// B
localStorage.setItem('lang', 'tr');
// C
localStorage.save('lang', 'tr');
// D
localStorage.put('lang', 'tr');

Cevabı göster

B — Doğru! setItem iki parametre alır: anahtar ve değer.

Kayıtlı temayı oku

const theme = localStorage.____('theme');

Cevabı göster

const theme = localStorage.getItem('theme');

Metodları anlamlarıyla eşleştir

localStorage.setItem(k, v)

Değeri kaydeder
localStorage.getItem(k)

Değeri okur, yoksa null
localStorage.removeItem(k)

Anahtarı siler
Kaydedilmemiş bir anahtarı getItem ile okursan ne döner?
```
localStorage.getItem('yok');
```
- null
- undefined
- Boş metin: ''
- Hata fırlatır
Cevabı göster

null — Doğru! Kaydedilmemiş anahtar için getItem null döndürür.

Sıradaki ders: sessionStorage

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler