🚀 HTML Web Storage: Tarayıcıda Veri Saklama Sanatı

Verileri kullanıcının tarayıcısında kalıcı veya geçici olarak saklama yöntemleri, localStorage ve sessionStorage kullanımı.

Web Storage: Çerezlerin Ötesine Geçmek

Selam gençler. Eskiden web sitelerinde kullanıcıya dair ufak bir bilgiyi (örneğin seçtiği temayı veya kullanıcı adını) hatırlamak istediğimizde tek çaremiz Cookies (Çerezler) idi. Ancak çerezlerin kapasitesi çok dar (4KB) ve her HTTP isteğinde sunucuya taşındıkları için gereksiz trafik yaratıyorlar.

Modern HTML5 ile hayatımıza giren Web Storage API, veriyi doğrudan kullanıcının bilgisayarında, anahtar-değer (key-value) çiftleri olarak saklamamıza olanak tanıyor. Üstelik kapasitesi çerezlere göre devasa (genelde 5-10MB arası) ve bu veriler asla sunucuya otomatik olarak gönderilmiyor; sadece istemci tarafında yaşıyor.

Biz genelde Neon Pong gibi küçük arcade oyunlarımızda, oyuncunun o güne kadar yaptığı en yüksek skoru sunucuya yük etmeden saklamak için bu yöntemi kullanıyoruz. Hem hızlı hem de maliyetsiz bir çözüm.

İki Kardeş: LocalStorage ve SessionStorage

Web Storage iki farklı mekanizma sunar. Aralarındaki tek fark ömürleridir:

  1. localStorage: Siz kodla silmediğiniz sürece veri orada kalır. Tarayıcıyı kapatsanız, bilgisayarı yeniden başlatsanız bile veriler yerindedir. Kullanıcı ayarları, yüksek skorlar veya 'beni hatırla' tercihleri için idealdir.
  2. sessionStorage: Veri sadece o sekme (tab) açık kaldığı sürece yaşar. Sekme kapatıldığı an veriler silinir. Tek seferlik form doldurma işlemleri veya sadece o oturuma özel geçici durumlar için kullanılır.

Önemli Kural: Web Storage sadece string (metin) saklayabilir. Eğer bir objeyi veya diziyi saklamak isterseniz JSON.stringify() ile metne çevirmeli, geri okurken de JSON.parse() ile objeye dönüştürmelisiniz.

🚀 Sanal Kodlama Alanı Yükleniyor...

Güvenlik ve Dikkat Edilmesi Gerekenler

Web Storage harika bir araç olsa da bazı sınırları ve riskleri var:

  • Hassas Veriler: Şifreler, kredi kartı bilgileri veya kritik kişisel veriler asla localStorage'da saklanmamalıdır. Çünkü bu verilere aynı domain üzerinden çalışan herhangi bir JavaScript kodu (veya kötü niyetli bir tarayıcı eklentisi) rahatlıkla erişebilir (XSS saldırıları).
  • Senkron Çalışma: Web Storage işlemleri senkrondur. Yani çok büyük miktarda veri yazmaya çalışırsanız, o işlem bitene kadar tarayıcı arayüzü anlık olarak donabilir.
  • Gizli Sekme: Birçok tarayıcı 'Gizli Mod' (Incognito) penceresi kapatıldığında localStorage verilerini de temizler.

Özetle; kullanıcı deneyimini iyileştiren, kritik olmayan veriler için localStorage sizin en yakın dostunuzdur. Bir sonraki adımda, bu verileri nasıl daha güvenli yönetebileceğinizi konuşuruz.

Teknik Kaynak: ovidgame.com