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');- A
- B
- C
- D
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.