Web Depolama (Web Storage)

Bu derste HTML5 ile gelen Web Depolama (Web Storage) yapısı anlatılmaktadır. localStorage ve sessionStorage kavramları, farkları ve kullanım senaryoları örnek JavaScript kodları ile detaylı şekilde ele alınır.

admin admin
Kasım 2, 2022 - 11:33 Updated: Ocak 9, 2026 - 00:17
0 341
Web Depolama (Web Storage)
Web Depolama (Web Storage)

HTML5 Web Depolama Nedir?

HTML5 Web Depolama, tarayıcı üzerinde küçük boyutlu verileri saklamayı sağlar. Çerezlere (cookies) alternatif olarak geliştirilmiştir ve daha fazla veri saklama kapasitesine sahiptir.

Web Storage, sayfa yenilense veya tarayıcı kapatılsa bile verilerin korunmasını sağlayabilir.

Web Storage Türleri

HTML5 Web Storage iki ana yapıdan oluşur:

  • localStorage

  • sessionStorage

localStorage Nedir?

localStorage, verileri kalıcı olarak saklar. Tarayıcı kapatılsa bile veriler silinmez.

localStorage Veri Kaydetme


localStorage.setItem("kullaniciAdi", "CilginYazilim");

localStorage Veri Okuma


var kullanici = localStorage.getItem("kullaniciAdi");
console.log(kullanici);

localStorage Veri Silme


localStorage.removeItem("kullaniciAdi");

localStorage Tüm Verileri Temizleme


localStorage.clear();

sessionStorage Nedir?

sessionStorage, verileri oturum süresince saklar. Tarayıcı kapatıldığında tüm veriler otomatik olarak silinir.

sessionStorage Veri Kaydetme


sessionStorage.setItem("tema", "dark");

sessionStorage Veri Okuma


var tema = sessionStorage.getItem("tema");
console.log(tema);

sessionStorage Veri Silme


sessionStorage.removeItem("tema");

localStorage ve sessionStorage Arasındaki Farklar

  • localStorage kalıcıdır

  • sessionStorage geçicidir

  • İkisi de tarayıcı bazlı çalışır

  • Her ikisi de yaklaşık 5–10 MB veri saklayabilir

JSON Veri Kullanımı

Web Storage yalnızca string veri tutar. Nesne saklamak için JSON kullanılır.

JSON Kaydetme Örneği


var kullanici = {
    ad: "Ahmet",
    sehir: "İstanbul"
};

localStorage.setItem("kullaniciBilgi", JSON.stringify(kullanici));

JSON Okuma Örneği


var veri = JSON.parse(localStorage.getItem("kullaniciBilgi"));
console.log(veri.ad);

Web Storage Nerelerde Kullanılır?

  • Kullanıcı tema ayarları

  • Sepet bilgileri

  • Dil tercihleri

  • Form geçici kayıtları

  • Kullanıcı deneyimi iyileştirme

Web Storage Kullanırken Dikkat Edilmesi Gerekenler

  • Hassas bilgiler saklanmamalı

  • Veri boyutları kontrol edilmeli

  • Gereksiz veriler temizlenmeli

  • Tarayıcı uyumluluğu test edilmeli

HTML5 Web Depolama konusuyla birlikte tarayıcı tarafında veri saklamanın temellerini öğrenmiş oldun. Bu yapı, modern web uygulamalarının vazgeçilmez parçalarından biridir.

Etiketler: