Akla Mühür Vurmak: State’i LocalStorage ile Kalıcı Hale Getirme

Geçici Aklı Kalıcı Hale Getirmek

Önceki aşamada uygulamanın “state” kavramı öğrenilmişti. Ancak bu state geçiciydi. Sayfa yenilendiğinde her şey sıfırlanıyordu.

Bu derste amaç, bu geçici aklı kalıcı hale getirmektir. Yani uygulama artık unutmaz hale gelir.


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


LocalStorage Nedir?

LocalStorage, tarayıcı içinde veri saklamayı sağlayan bir hafıza alanıdır. Bu alan sayesinde:

  • Veriler kaybolmaz
  • Sayfa yenilense bile korunur
  • Kullanıcıya özel durumlar saklanabilir

Bu yapı, modern web uygulamalarının temel hafıza sistemlerinden biridir.


State ve Hafıza Birleşimi

Bu aşamada iki kavram birleşir:

  • State: Anlık durum
  • LocalStorage: Kalıcı hafıza

Bu birleşim sayesinde uygulama artık sadece çalışan değil, aynı zamanda hatırlayan bir yapıya dönüşür.


Sayaç Uygulamasında Kalıcılık Mantığı

Sayaç uygulaması artık sadece artıp azalan bir sayı değildir. Aynı zamanda bu sayıyı saklayan bir sisteme dönüşür.

Sistem şöyle çalışır:

  • Sayı değişir
  • Yeni değer hafızaya kaydedilir
  • Sayfa açıldığında hafızadan okunur
  • Son değer ekrana yazılır

AI ile Kalıcı Sistem Tasarımı

Bu aşamada yapay zekâ, sadece hesaplama değil, veri yönetimi konusunda da rehber olur.

Sistem:

  • State’i günceller
  • Veriyi hafızaya yazar
  • Sayfa açılışında veriyi geri yükler

Bu yapı, gerçek dünya uygulamalarının temelidir.


Kursiyerin Uygulama Süreci: Hafıza Kilidini Takmak

Öğrenci bu aşamada mevcut sayaç sistemini geliştirir.

Süreç:

  • Kod güncellenir
  • State değiştikçe veri kaydedilir
  • Sayfa açıldığında veri okunur
  • Sistem test edilir

Bu adım sonunda uygulama artık kalıcı hale gelir.


Sayfa Yenileme Testi: Hafıza Kontrolü

Bu aşamada kritik bir test yapılır:

  • Sayı 5 yapılır
  • Sayfa yenilenir
  • Eğer ekranda 5 görünüyorsa sistem başarılıdır

Bu test, kalıcı veri yapısının çalıştığını gösterir.


Aha! Anı: Kalıcı Uygulama Gerçeği

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

  • State tek başına geçicidir
  • Hafıza ile birleştiğinde kalıcı olur
  • Uygulama artık unutmaz

Bu, frontend geliştirmede önemli bir eşiktir.


Metafor: Akla Mühür Vurmak

Bu dersin metaforu oldukça güçlüdür:

  • State = akıl
  • LocalStorage = kasa
  • Kaydetmek = mühür vurmak

Bu yapı sayesinde bilgi kaybolmaz ve sistem süreklilik kazanır.


Sonuç: İlk Kalıcı Uygulama

Bu adım ile birlikte sayaç uygulaması artık sadece çalışan bir sistem değil, aynı zamanda hatırlayan bir yapıya dönüşür.

Bu aşamada öğrenci:

  • State ve localStorage ilişkisini öğrenir
  • Kalıcı veri mantığını kavrar
  • Modern web uygulamalarının temelini anlar

Bu adım, üretici zihnin “kalıcı sistem tasarımı” seviyesine geçtiği noktadır.