Karmaşık Paketleme (JSON Mührü): To-Do List Verilerini LocalStorage’a Kaydetme

Karmaşık Verileri Saklama İhtiyacı

Basit state yapıları tek değerleri saklamak için yeterlidir. Ancak gerçek uygulamalarda birden fazla veri, yapılandırılmış şekilde saklanmalıdır.


https://www.udemy.com/course/ai-ile-aha-html-ile-her-seyi-yaparsn-sor-ogren-uret/


To-Do list gibi sistemler:

  • Birden fazla öğe içerir
  • Sürekli güncellenir
  • Kalıcı hale getirilmek ister

Bu noktada JSON devreye girer.


JSON Mantığı: Dijital Paketleme Sistemi

JSON, verileri taşınabilir bir formata dönüştürür. Bu sayede karmaşık yapılar tek bir paket haline gelir.

İki temel işlem vardır:

  • JSON.stringify → Pakete dönüştürme
  • JSON.parse → Paketi açma

Bu yapı, veri taşımayı ve saklamayı standart hale getirir.


LocalStorage ile Kalıcı Veri Saklama

LocalStorage, tarayıcı içinde veri saklamayı sağlar. Ancak bu alan sadece metin tabanlı veri tutar.

Bu yüzden:

  • Array → JSON’a çevrilir
  • JSON → LocalStorage’a kaydedilir
  • Sayfa açıldığında tekrar okunur

Bu döngü kalıcı veri sistemini oluşturur.


To-Do List Sistemi: Paketli Veri Modeli

Bu uygulamada liste artık sadece hafızada değil, kalıcı olarak saklanır.

Sistem:

  • Görevleri array içinde tutar
  • JSON formatına dönüştürür
  • LocalStorage’a kaydeder
  • Sayfa açıldığında geri yükler

Bu yapı gerçek uygulama mimarisine çok yakındır.


AI ile Veri Paketleme Süreci

Yapay zekâ bu aşamada veri yönetimini otomatikleştiren bir yardımcıdır.

Sistem:

  • Listeyi takip eder
  • Veriyi paketler
  • Hafızaya yazar
  • Geri yükler

Bu süreç veri yaşam döngüsünü oluşturur.


Kursiyerin Uygulama Süreci: Kalıcı Liste Sistemi

Öğrenci bu aşamada mevcut To-Do uygulamasını geliştirir.

Süreç:

  • Array oluşturulur
  • JSON ile paketleme eklenir
  • LocalStorage bağlantısı kurulur
  • Sayfa test edilir
  • Tarayıcı kapatılıp açılır

Bu adım kalıcılığı doğrular.


Veri Yaşam Döngüsü

Bu sistemin temel akışı şöyledir:

  • Kullanıcı veri ekler
  • Veri array’e gider
  • JSON’a çevrilir
  • LocalStorage’a kaydedilir
  • Sayfa açıldığında geri yüklenir

Bu döngü modern web uygulamalarının temelidir.


Aha! Anı: Dijital Kasa Gerçeği

Bu dersin en önemli farkındalığı şudur:

  • Veri artık kaybolmaz
  • Paketlenir ve saklanır
  • Geri çağrılabilir

Bu, gerçek yazılım sistemlerinin temel mantığıdır.


Metafor: Kargo Paketi Sistemi

Bu dersin metaforu “kargo paketi”dir.

  • Array = içerik
  • JSON = paketleme
  • LocalStorage = depo

Bu yapı sayesinde veri güvenli ve taşınabilir hale gelir.


Sonuç: İlk Gerçek Kalıcı Uygulama

JSON ile birlikte uygulama artık sadece çalışan değil, aynı zamanda hatırlayan bir sisteme dönüşür.

Bu aşamada öğrenci:

  • JSON mantığını öğrenir
  • Veri paketlemeyi kavrar
  • Kalıcı frontend sistemleri oluşturur

Bu adım, üretici zihnin “veri mimarisi” seviyesine geçtiği noktadır.