UYARI: İnternet bir özgürlük ortamı, evet fakat her site gibi bu site de yayınına devam edebilmesi için reklam almak zorunda, ama büyük ihtimalle siz de reklam görmekten sıkıldığınız için AdBlock veya benzeri bir programı kurdunuz. Bu durum anlaşılır bir durum birçok kişi bunu yapıyor, fakat bu yapıldığı zaman da siteler masraflarını karşılayamadıkları için kapanmak zorunda kalıyor. Sitemiz AdBlock kullanan birini "Sen siteye girme" kardeşim diye engellemiyor çünkü özgürlük bunu gerektiriyor, siteyi seven zaten AdBlock'u kapatıp desteğini gösterir buna gerek yok, bu yüzden sitede özgürce dolaşacak sadece her dolaştığınız sayfalarda bu uyarı bulunacaktır....
Logo
mobilmenu
RenkliKodlar
HTML5 Web Depolama

HTML Web Depolama nedir?


Web uygulamalarinda verileri kullanıcının tarayıcısında yerel olarak saklama imkanı sağlar HTML5'ten önce, uygulama verilerinin her sunucu isteğine dahil edilen çerezlerde saklanması gerekiyordu. Web depolama  daha güvenlidir ve web sitesi performansını etkilemeden yerel olarak büyük miktarlarda veri depolanabilir.
Çerezlerin aksine, depolama sınırı çok daha büyük (en az 5 MB), Web depolama etki alanı ve protokol başına. Tek bir kaynaktan gelen tüm sayfalar aynı verilere depolanabilir ve erişilebilir.

Nerede kullanılabilir?


Çerezleri kullandığımız gibi amaçlar için kullanılabilir örneğin bir alışveriş sitesi düşünün sepete eklediğiniz ürünlerin kimlik no (idno) adet sayısını burada saklayabilirsiniz özellikle localStorage bunun için çok uygun öyle ki ziyaretçi herhangi bir sebepten sayfayı kapatsa veya tarayıcı çökse tarayıcıda tutulan veriler sayfayı tekrar açtığında orada duruyor olacaktır çünkü Tarayıcı kapalıyken veriler silinmeyecek ve ertesi gün, hafta veya yıl kullanılabilecektir, bu sayede ziyaretçi tekrar tarayıcıdan siteye geldiğinde önceden eklediği ürünleri tekrar ekleme derdine düşmeyecek. Tabiki çerezlerdeki gibi tarayıcı temizliği veriyi silecek olduğunu da unutmayalım.

Tarayıcı Desteği

  • Chrome 4.0
  • Internet Explorer / Edge 8.0
  • Firefox 3.5
  • Safari 4.0
  • Opera 11.5

HTML Web Depolama Nesneleri


HTML web depolama, istemcide veri depolamak için iki nesne sağlar
  1. window.localStorage : son kullanma tarihi olmayan verileri depolar
  2. window.sessionStorage : bir oturum için veri depolar (tarayıcı sekmesi kapatıldığında veriler kaybolur)
Kullanmadan önce, localStorage ve sessionStorage için tarayıcı desteği kontrolu aşağıdaki kod ile sağlanmalıdır.
if (typeof(Storage) !== "undefined") {
  // localStorage veya sessionStorage kodları
} else {
  // Web Depolama desteği yok..
}Kopyala

LocalStorage Nesnesi


LocalStorage nesnesi son kullanma tarihi olmayan verileri depolar. Tarayıcı kapalıyken veriler silinmeyecek ve ertesi gün, hafta veya yıl kullanılabilecektir.
Örnek kod
<html>
<body>

<div id="sonuc"></div>

<script>
if (typeof(Storage) !== "undefined") {
	//Veri Kayıt etme
	localStorage.setItem("soyad", "İbrahim");
	// Kyıtlı veriyi okuma
	document.getElementById("sonuc").innerHTML = localStorage.getItem("soyad");
} else {
	document.getElementById("sonuc").innerHTML = "Tarayıcının Web Depolama desteği yok!";
}
</script>
</body>
</html>Kopyala

Kodu çalıştırınca tarayıcı konsolundan kaydın yapıldığını ve okunduğunu görüyoruz
Ekran Görüntüsü 29-08-2019 22.51.37


İki farklı kullanımı vardır üstteki kullanımdan farklı Bir diğer kullanım biçimi de alttaki gibidir.
	//Veri Kayıt etme
	localStorage.soyad = "İbrahim";
	// Kyıtlı veriyi okuma
	document.getElementById("sonuc").innerHTML = localStorage.soyad;Kopyala

Web Depolama Silme veya kaldırma


"soyad" localStorage öğesini kaldırma sözdizimi aşağıdaki gibidir.
localStorage.removeItem("soyad");Kopyala


Not: İsim / değer çiftleri daima string olarak kaydedilir. Gerektiğinde bunları başka bir formata (sayi) dönüştürmeyi unutmayın!
Aşağıdaki örnek, düğmeye her tıklandığında 5.li sayma yapar. Bu kodda değer dizesi, sayacı artırabilmek için bir (Number) sayıya dönüştürülmüştür.
<html>
<head>
<script>
function Sayac() {
  if (typeof(Storage) !== "undefined") {
    if (localStorage.sayac) {
      localStorage.sayac = Number(localStorage.sayac)+5;
    } else {
      localStorage.sayac = 5;
    }
    document.getElementById("sonuc").innerHTML = localStorage.sayac;
  } else {
    document.getElementById("sonuc").innerHTML = "Tarayıcının Web Depolama desteği yok!";
  }
}
</script>
</head>
<body>

<button onclick="Sayac()" type="button">5.li saydır</button>
<div id="sonuc"></div>

</body>
</html>Kopyala

SessionStorage Nesnesi


SessionStorage nesnesi, yalnızca bir oturum için verileri depolaması dışında localStorage nesnesine eşittir. Tek farkı Kullanıcı bir tarayıcı sekmesini kapattığında veriler silinir. Ayrıca tarayıcı konsolunda takip etmek için Local Storage değil de Session Storage kısmına bakmanız gerektiğini unutmayın.

Aşağıdaki örnek Üstteki örneğin aynısı olan fakat SessionStorage kullanarak, düğmeye her tıklandığında 5.li sayma yapar. Bu kodda değer dizesi, sayacı artırabilmek için bir (Number) sayıya dönüştürülmüştür.
<html>
<head>
<script>
function Sayac() {
  if (typeof(Storage) !== "undefined") {
    if (sessionStorage.sayac) {
      sessionStorage.sayac = Number(sessionStorage.sayac)+5;
    } else {
      sessionStorage.sayac = 5;
    }
    document.getElementById("sonuc").innerHTML = sessionStorage.sayac;
  } else {
    document.getElementById("sonuc").innerHTML = "Tarayıcının Web Depolama desteği yok!";
  }
}
</script>
</head>
<body>

<button onclick="Sayac()" type="button">5.li saydır</button>
<div id="sonuc"></div>

</body>
</html>Kopyala

"sayac" sessionStorage öğesini kaldırma sözdizimi localStorage'dekine benzer ve aşağıdaki gibidir.

sessionStorage.removeItem("lastname");Kopyala



HTML5 özelliği olan onunla gelen ve javascript kodları ile kullanılan üstüne birde beni hangi kategoride yazmam konusunda çok düşündüren bu yazıya müsadenizle burada noktayı koymak istiyorum.
Her şey gönlünüze göre olsun.

HTML5 Web Depolama Yorumları:


Bu yazıya henüz yorum yazılmamış!



Bağlan

Yorumunuza cevap yazilmasi durumunda bildiri almak istiyor musunuz?