LocalStorage ve SessionStorage Kullanımı

Web geliştirme serüveninde, tarayıcı tarafında veri depolama ihtiyacı hemen her projenin kapısını çalar. Kullanıcı tercihlerini kaydetmekten tutun, sepet içeriğini geçici olarak saklamaya, hatta çevrimdışı çalışma yetenekleri sunmaya kadar geniş bir yelpazede bu depolama mekanizmalarına başvururuz. Geleneksel olarak çerezler (cookies) bu iş için kullanılırdı, ancak modern web uygulamalarının artan veri depolama gereksinimleri ve performans beklentileri, daha gelişmiş çözümleri beraberinde getirdi. İşte tam bu noktada, Web Storage API'nin sunduğu LocalStorage ve SessionStorage devreye giriyor. Bu iki mekanizma, çerezlere kıyasla çok daha büyük kapasiteler sunar ve her HTTP isteğiyle sunucuya gönderilmediği için hem güvenlik hem de performans açısından önemli avantajlar sağlar.

Web Storage API'ye Genel Bakış ve Neden İhtiyaç Duyarız?

Bir web sayfasında kullanıcı etkileşimleriyle oluşan verilerin, sayfa yenilendiğinde veya kullanıcı sitede farklı sayfalara geçiş yaptığında kaybolmamasını sağlamak, geliştiriciler için temel bir gereksinimdir. İşte Web Storage API, bu soruna şık ve etkili bir çözüm sunar. Tarayıcı tarafında, anahtar-değer (key-value) çiftleri şeklinde veri depolamamıza olanak tanıyan basit bir arayüzdür. Düşünsenize, bir kullanıcının sepetine eklediği ürünlerin, sayfayı yanlışlıkla kapatıp tekrar açtığında kaybolmaması ne kadar önemlidir, değil mi? Ya da bir kullanıcının tercih ettiği tema ayarını her ziyaretinde yeniden yapmasını istemeyiz. İşte bu gibi senaryolarda Web Storage API, kullanıcı deneyimini doğrudan iyileştiren kritik bir rol oynar. Çerezlerin 4KB'lık sınırlı kapasitesi ve her istekle sunucuya gönderilerek bant genişliğini tüketme dezavantajına karşın, Web Storage genellikle 5MB ile 10MB arasında bir depolama alanı sunar ve sunucuya asla otomatik olarak gönderilmez. Bu da performans ve güvenlik açısından büyük bir fark yaratır.

LocalStorage: Kalıcı Depolama Çözümü

LocalStorage, adından da anlaşılacağı üzere, verileri kalıcı olarak depolamak için tasarlanmış bir yapıdır. Yani, depoladığınız verilerin bir son kullanma tarihi yoktur. Kullanıcı tarayıcısını kapatsa, bilgisayarını yeniden başlatsa veya sayfayı tekrar açsa bile, bu veriler orada kalmaya devam eder. Ta ki kullanıcı tarayıcı ayarlarından siteye ait verileri manuel olarak temizleyene ya da siz kodunuzla bu verileri silene kadar... Bu özelliğiyle LocalStorage, uzun vadeli kullanıcı tercihleri, dil ayarları, tema seçimleri, "beni hatırla" gibi oturumlar arası kalıcılık gerektiren durumlar için idealdir. Mesela bir e-ticaret sitesinde kullanıcının sepetine eklediği ürünleri, kullanıcı çıkış yapsa bile bir sonraki ziyaretinde tekrar göstermek isteyebilirsiniz; işte bu, LocalStorage ile çok kolay hale gelir. Veya bir uygulamanın çevrimdışı modda çalışabilmesi için bazı statik verileri önbelleğe alması gerektiğinde, yine LocalStorage'a başvurulur.

Peki, LocalStorage'ı nasıl kullanırız? Oldukça basit bir API'si var:

• Veri Saklama (
  
  CODE Copy

  1setItem()

  
  ):
  
  CODE Copy

  123456
  localStorage.setItem('kullaniciAdi', 'Ahmet Yılmaz');
  localStorage.setItem('temaSecimi', 'dark');
  // Objeleri saklamak için JSON.stringify kullanmalıyız:
  const ayarlar = { dil: 'tr', bildirimler: true };
  localStorage.setItem('kullaniciAyarlari', JSON.stringify(ayarlar));
  

  
  Burada dikkat etmeniz gereken önemli bir nokta var: LocalStorage sadece string (metin) tipinde veri saklar. Eğer bir nesne veya dizi saklamak isterseniz,
  
  CODE Copy

  1JSON.stringify()

  
  kullanarak onu bir JSON metnine dönüştürmeniz gerekir.
  
• Veri Okuma (
  
  CODE Copy

  1getItem()

  
  ):
  
  CODE Copy

  123456789101112131415
  const ad = localStorage.getItem('kullaniciAdi');
  console.log(ad); // "Ahmet Yılmaz" çıktısını verir
  
  const tema = localStorage.getItem('temaSecimi');
  if (tema === 'dark') {
      document.body.classList.add('dark-theme');
  }
  
  // Saklanan objeyi geri okurken JSON.parse kullanmalıyız:
  const ayarlarJSON = localStorage.getItem('kullaniciAyarlari');
  if (ayarlarJSON) {
      const ayarlarObj = JSON.parse(ayarlarJSON);
      console.log(ayarlarObj.dil); // "tr"
  }
  

  
  Veriyi okurken de aynı şekilde, eğer sakladığınız bir nesne veya dizi ise,
  
  CODE Copy

  1JSON.parse()

  
  ile tekrar JavaScript nesnesine dönüştürmeyi unutmayın.
  
• Veri Silme (
  
  CODE Copy

  1removeItem()

  
  ):
  Belirli bir anahtara ait veriyi silmek istediğinizde bu metodu kullanırsınız.
  
  CODE Copy

  12
  localStorage.removeItem('kullaniciAdi');
  

  
  
• Tüm Veriyi Temizleme (
  
  CODE Copy

  1clear()

  
  ):
  Bir domaine ait tüm LocalStorage verilerini silmek için kullanılır. Dikkatli kullanılması gereken bir metot, zira geri dönüşü yok...
  
  CODE Copy

  12
  localStorage.clear();
  

  
  
• Anahtar Listeleme ve Uzunluk (
  
  CODE Copy

  1key()

  
  ,
  
  CODE Copy

  1length

  
  ):
  Depolanan anahtarları döngüyle gezmek veya kaç öğe olduğunu öğrenmek için de kullanışlıdır.
  
  CODE Copy

  123456
  for (let i = 0; i < localStorage.length; i++) {
      const key = localStorage.key(i);
      console.log(${key}: ${localStorage.getItem(key)});
  }
  console.log(Toplam ${localStorage.length} öğe var.);
  

LocalStorage ile çalışırken unutulmaması gereken kritik bir nokta: Same-origin policy (aynı kaynak politikası) kuralına tabidir. Yani example.com üzerinde depolanan verilere sub.example.com veya another-domain.com üzerinden erişilemez. Bu, bir güvenlik katmanı sağlar.

SessionStorage: Oturum Tabanlı Depolama

SessionStorage ise, LocalStorage'a oldukça benzer bir API'ye sahip olsa da, temel farkı verilerin kalıcılığıdır. SessionStorage'da depolanan veriler, tarayıcı sekmesi veya penceresi kapatıldığında otomatik olarak silinir. Yani, bu veriler sadece mevcut tarayıcı oturumu için geçerlidir. Bir kullanıcı yeni bir sekme açtığında veya aynı siteyi farklı bir pencerede ziyaret ettiğinde, o sekmenin veya pencerenin kendi ayrı SessionStorage örneği olur ve diğerinden bağımsız çalışır. Bu da onu, çok adımlı formlar, geçici kullanıcı girdileri veya oturuma özel, hassas olmayan veriler için ideal kılar. Örneğin, bir rezervasyon uygulamasında kullanıcının adım adım girdiği bilgileri, bir sonraki adıma geçerken SessionStorage'da tutabilirsiniz. Kullanıcı işlemi tamamlamadan tarayıcıyı kapatırsa, bu geçici verilerin de silinmesi istenir, değil mi? İşte SessionStorage tam da bu ihtiyaca cevap verir.

SessionStorage'ın API'si LocalStorage ile tamamen aynıdır:

• Veri Saklama (
  
  CODE Copy

  1setItem()

  
  ):
  
  CODE Copy

  1234
  sessionStorage.setItem('geciciAdim', 'Adim 1 Tamamlandi');
  const formData = { ad: 'Ayşe', soyad: 'Demir' };
  sessionStorage.setItem('formVerisi', JSON.stringify(formData));
  

  
  
• Veri Okuma (
  
  CODE Copy

  1getItem()

  
  ):
  
  CODE Copy

  123456789
  const adim = sessionStorage.getItem('geciciAdim');
  console.log(adim); // "Adim 1 Tamamlandi"
  
  const formVerisiJSON = sessionStorage.getItem('formVerisi');
  if (formVerisiJSON) {
      const formVerisiObj = JSON.parse(formVerisiJSON);
      console.log(formVerisiObj.ad); // "Ayşe"
  }
  

  
  
• Veri Silme (
  
  CODE Copy

  1removeItem()

  
  ):
  
  CODE Copy

  12
  sessionStorage.removeItem('geciciAdim');
  

  
  
• Tüm Veriyi Temizleme (
  
  CODE Copy

  1clear()

  
  ):
  
  CODE Copy

  12
  sessionStorage.clear();
  

Yine LocalStorage'da olduğu gibi, SessionStorage da sadece string değerleri saklar ve

/

kullanımı burada da geçerlidir. Aynı kaynak politikası kuralı da SessionStorage için aynen geçerlidir. Bir sekmede depolanan SessionStorage verisine başka bir sekmeden doğrudan erişilemez.