CodeBlanks Logo Icon CodeBlanks

JSON ile veri saklama

JavaScript kursu · Orta seviye · Ders 45/134

localStorage ile nesne ve dizileri JSON olarak saklamayı öğrenirsin.

localStorage yalnızca metin saklar

localStorage yalnızca metin saklar. Bir sayı kaydedersen, JavaScript onu otomatik olarak metne çevirir ve geri okurken bir metin alırsın.

localStorage.setItem('count', 42);
const back = localStorage.getItem('count');

Burada 42 sayısı kaydedilir, ama getItem '42' metnini döndürür. Bir nesneyi kaydetmeye çalışırsan '[object Object]' alırsın; çünkü nesneler doğrudan metne çevrilemez.

Diziyi metne çevirip geri okuma

Bir diziyi localStorage'a kaydetmek için önce onu metne çevirmen gerekir. join metodu dizinin tüm öğelerini bir ayraçla birleştirir ve tek bir metin üretir.

const names = ['Alex', 'Mara'];
localStorage.setItem('names', names.join(','));

Geri okurken split metodu metni ayraçtan bölerek diziye çevirir. Ancak getItem kayıt yoksa null döndürdüğü için önce kontrol etmen gerekir.

Uygulama Diziyi metin olarak kaydet ve geri oku

names dizisini .join(',') ile metne çevir ve 'names' anahtarına kaydet. Sonra getItem ile okuyup .split(',') ile back değişkenine dizi olarak ata.

Örnek çözümü göster
localStorage.setItem('names', names.join(','));
const back = localStorage.getItem('names').split(',');

Kendini test et

  1. Bir nesneyi localStorage'a kaydedersen getItem ne döner?

    localStorage.setItem('user', { name: 'Ayşe' });
    const back = localStorage.getItem('user');
    • { name: 'Ayşe' } nesnesi
    • Ayşe
    • Hata fırlatır
    • [object Object]
    Cevabı göster

    [object Object] — Doğru! Nesne otomatik olarak metne çevrilince '[object Object]' olur.

  2. Diziyi metne çevir

    const text = names.____(',');
    Cevabı göster
    const text = names.join(',');
  3. Dönüşüm metodlarını eşleştir

    names.join(',')
    Diziyi metne çevirir
    text.split(',')
    Metni diziye çevirir
    String(42)
    Sayıyı metne çevirir
  4. setItem('count', 42) sonrası getItem('count') ne tür döner?

    localStorage.setItem('count', 42);
    const back = localStorage.getItem('count');
    • string (metin)
    • number (sayı)
    • boolean
    • object
    Cevabı göster

    string (metin) — Doğru! localStorage her zaman metin döndürür; 42 '42' olur.

Orta seviye bölümündeki tüm dersler