HTML5 Web Storage

HTML5 ile birlikte gelen Web Storage özelliğiyle ilgili bilgiler ve localStorage ile sessionStorage kullanımı yer alıyor.

Web Storage nedir

Web Storage verileri tarayıcıda depolamak için kullanılır.

Local Storage ve Session Storage olmak üzere iki depolama türü vardır.

HTML5 öncesinde bu işlem çerezler ile yapılıyordu ama güvenli değildi.

HTML5 Web Storage artık daha güvenli daha hızlı ve büyük verileri saklamaya imkan veriyor.

Depolama boyutu tarayıcıya göre değişmekle birlikte en az boyutu destekleyen tarayıcıda 5MB sınırı vardır.

• window.localStorage – Kullanıcı veriyi silene kadar saklar.
• window.sessionStorage – Kullanıcı sayfayı kapattığında veri silinir.

Web Storage kullanmadan önce tarayıcı desteğini kontrol etmeyi unutmayın!

if (typeof (Storage) !== "undefined") {
  // localStorage ve sessionStorage işlemleri
} else {
  alert("Tarayıcınız Web Storage API desteklemiyor.");
}

localStorage

Tarayıcı kapatıldığında veri silinmez. Kullanıcı veriyi silene kadar saklar.

Veri kullanıcı tarafından silinmezse bir ay veya bir yıl sonra da erişilebilir.

<script>
if (typeof (Storage) !== "undefined") {
  // Depola
  localStorage.ADRES = "www.yusufsezer.com.tr";
  // Getir
  alert(localStorage.ADRES);
} else {
  alert("Tarayıcınız Web Storage API desteklemiyor.");
}
</script>

Verilere anahtar yerine sıra numarası ile erişmek için key metodu kullanılabilir.

İlk kayıt edilen anahtarı verir.

localStorage.key(0);

Veriyi silmek için removeItem metodu kullanılabilir.

localStorage.removeItem("ADRES");

Tüm verileri silmek için clear metodu kullanılabilir.

localStorage.clear();

Tüm verileri listelemek.

<div id="veriler"></div>
<script>
var veriler = document.getElementById("veriler");
if (typeof (Storage) !== "undefined") {

  // Depola
  localStorage.ADI = "Yusuf";
  localStorage.SOYADI = "SEZER";
  localStorage.WEBSITE = "www.yusufsezer.com.tr";
  localStorage.WEBURL = "www.yusufsezer.com";

  // Listele
  for (var i = 0; i < localStorage.length; i++) {
    veriler.innerHTML += localStorage.key(i) + ": " + localStorage.getItem(localStorage.key(i)) + "<br />";
  }

  // Temizle
  localStorage.clear();

} else {
  alert("Tarayıcınız Web Storage API desteklemiyor.");
}
</script>

NOT: localStorage değerleri string türünde kaydetmektedir. Kullanıma göre değerleri dönüştürmeyi unutmayın!

Dönüştürme işlemi ile ilgili örnek<div id="veriler"></div>
<script>
var veriler = document.getElementById("veriler");
if (typeof (Storage) !== "undefined") {

  if (localStorage.ziyaretSayisi) {
    localStorage.ziyaretSayisi = Number(localStorage.ziyaretSayisi) + 1;
  } else {
    localStorage.ziyaretSayisi = 1;
  }

  veriler.innerHTML = "Sayfayı " + localStorage.ziyaretSayisi + " kez ziyaret ettiniz.";

} else {
  alert("Tarayıcınız Web Storage API desteklemiyor.");
}
</script>

sessionStorage

HTML5 sessionStorage ile localStorage kullanımı aynıdır. Arasındaki tek fark sessionStorage sayfa kapatıldıktan sonra veri silinir.

<div id="veriler"></div>
<script>
var veriler = document.getElementById("veriler");
if (typeof (Storage) !== "undefined") {

  if (sessionStorage.ziyaretSayisi) {
    sessionStorage.ziyaretSayisi = Number(sessionStorage.ziyaretSayisi) + 1;
  } else {
    sessionStorage.ziyaretSayisi = 1;
  }

  veriler.innerHTML = "Sayfayı " + sessionStorage.ziyaretSayisi + " kez ziyaret ettiniz.";

} else {
  alert("Tarayıcınız Web Storage API desteklemiyor.");
}
</script>

localStorage ve sessionStorage arasındaki fark

HTML5 localStorage ve sessionStorage arasındaki farkı daha iyi görebilmek için aşağıdaki örneği tarayıcıda çalıştırın.

Sayfayı 5-6 defa yenileyin.

Daha sonra tarayıcı kapatın ve yeniden açın.

Tekrar açtığınızda localStorage değeri kaldığı yerden devam ederken sessionStorage değeri yeniden başlayacaktır.

<div id="veriler"></div>
<script>
var veriler = document.getElementById("veriler");
if (typeof (Storage) !== "undefined") {

  if (localStorage.ziyaretSayisi) {
    localStorage.ziyaretSayisi = Number(localStorage.ziyaretSayisi) + 1;
  } else {
    localStorage.ziyaretSayisi = 1;
  }

  if (sessionStorage.ziyaretSayisi) {
    sessionStorage.ziyaretSayisi = Number(sessionStorage.ziyaretSayisi) + 1;
  } else {
    sessionStorage.ziyaretSayisi = 1;
  }

  veriler.innerHTML += "localStorage değeri = " + localStorage.ziyaretSayisi + "<br />";
  veriler.innerHTML += "sessionStorage değeri = " + sessionStorage.ziyaretSayisi;

} else {
  alert("Tarayıcınız Web Storage API desteklemiyor.");
}
</script>

HTML5 Derslerine buradan ulaşabilirsiniz…

Hayırlı günler dilerim.