HTML Web Storage API: Veri Saklama ve Kullanma Yöntemleri

Merhaba sevgili kod aşkı! 👋
Bugün tarayıcının gizli sandığını açacağız: Web Storage API. Yani, verileri saklayıp, istediğimiz zaman çıkarabileceğimiz modern ve hızlı bir yöntem! 🗝️

Eskiden çerezlerle uğraşırdık, şimdi ise localStorage ve sessionStorage ile hayat çok daha kolay. Hem uzun süreli hem kısa süreli veri saklamayı öğreniyoruz. Ama önce tanışalım:

1️⃣ Web Storage Nedir Aşkım? 💌

Web Storage, tarayıcının içinde veri saklamamıza yarayan mini bir kasadır.

• localStorage → Tarayıcıyı kapatsan bile veriler durur.
• sessionStorage → Tarayıcıyı veya sayfayı kapatınca veriler uçup gider.

💡 İpucu: Bir şeyi kalıcı saklamak istiyorsan localStorage, geçici saklamak istiyorsan sessionStorage kullan. Basit, değil mi? 😎

2️⃣ Web Storage’in Temel Metotları 🔧

💡 Küçük not: Her veri string olarak saklanır. Eğer obje saklayacaksan, JSON.stringify kullanmalısın.

3️⃣ Pratik Kullanım Örnekleri 💻

A) Basit Veri Saklama ve Okuma

<script>
  // Local Storage ile veri saklama
  localStorage.setItem("isim", "Cansu");
  
  // Veri okuma
  let isim = localStorage.getItem("isim");
  console.log("LocalStorage'daki isim:", isim);
</script>

🎯 Açıklama: Artık tarayıcı bizim “Cansu” verimizi unutmuyor. Tarayıcıyı kapatsan bile veriler durur!

B) Obje Saklamak

<script>
  let kullanici = {
    ad: "Cansu",
    yas: 25,
    meslek: "Blog Yazarı"
  };

  // Obje saklamak için stringify kullanıyoruz
  localStorage.setItem("kullanici", JSON.stringify(kullanici));

  // Veriyi okumak için parse
  let veri = JSON.parse(localStorage.getItem("kullanici"));
  console.log(veri.ad); // Cansu
  console.log(veri.yas); // 25
</script>

💡 Not: JSON.stringify ve JSON.parse hayat kurtarıyor. Obje saklamak istiyorsan mutlaka bunu kullan! 😎

C) Session Storage ile Geçici Veri Saklama

<script>
  sessionStorage.setItem("gecici", "Bu veri sayfa kapanınca gider!");
  console.log(sessionStorage.getItem("gecici"));
</script>

🌀 Sayfayı yenilersen veri kalır, ama sekmeyi kapatırsan uçup gider. Kısa süreli saklama için birebir!

D) Tüm Verileri Silmek

<script>
  // Tek veri sil
  localStorage.removeItem("isim");

  // Tüm verileri temizle
  sessionStorage.clear();
</script>

💣 Bu komutlarla verileri silebilirsin. Dikkat, bu geri alınamaz! 😂

4️⃣ Web Storage ile Eğlenceli Örnekler 🎮

Oyun Skoru Saklamak

<script>
  function skorKaydet(skor) {
    let maxSkor = localStorage.getItem("maxSkor") || 0;
    if(skor > maxSkor) {
      localStorage.setItem("maxSkor", skor);
      console.log("Yeni rekor! 🎉 Skor:", skor);
    } else {
      console.log("Rekor kırılmadı. Maks Skor:", maxSkor);
    }
  }

  skorKaydet(50); // Yeni skor denemesi
</script>

🏆 Açıklama: Oyun geliştiriyorsan, skorları localStorage ile saklayabilirsin. Rekorlar asla kaybolmaz!

Kullanıcı Tercihlerini Saklamak

<script>
  // Tema seçimi
  function temaDegistir(tema) {
    localStorage.setItem("tema", tema);
    document.body.style.backgroundColor = tema;
    console.log("Tema değiştirildi:", tema);
  }

  // Sayfa yüklendiğinde temayı uygula
  window.onload = function() {
    let kayitliTema = localStorage.getItem("tema");
    if(kayitliTema) {
      document.body.style.backgroundColor = kayitliTema;
    }
  }
</script>

💡 Artık kullanıcılar her geldiğinde tema aynı kalır. Kullanıcı mutlu, sen mutlu 😍

5️⃣ Web Storage vs Çerezler 🍪

• Çerezler: Küçük veri (4KB), sunucu ile haberleşir, her istekte gönderilir.
• Web Storage: Daha büyük veri (5MB), sadece tarayıcıda saklanır, hızlı ve basit!

💡 İpucu: Eğer tarayıcıya özel veri saklamak istiyorsan Web Storage, kullanıcı bilgilerini sunucuya göndermek istiyorsan çerezler!

6️⃣ Sonuç: Web Storage ile Hayat Kolay 🌟

• Hızlı, güvenli ve modern veri saklama yöntemi
• localStorage → Kalıcı veri
• sessionStorage → Geçici veri
• JSON ile obje saklamak mümkün
• Kullanıcı deneyimini geliştirmek için mükemmel!

Artık HTML’de Web Storage kahramanı sensin! 🦸‍♀️💖
Kendi projelerinde bu küçük ama güçlü sandığı kullan ve verilerini sakla, göster, sil ve yönet!