HTML5 Web Storage nedir? nasıl kullanılır?

HTML5 Web Storage nedir? nasıl kullanılır?

HTML5 Web Storage’ın getirdiği avantajlar nelerdir?

HTML5 Web Storage’ın Cookie'lerden (çerezlerden) farkı nedir?

Neden HTML5 Web Storage kullanmalıyız?

HTML5 ile hayatımıza giren Web Storage özelliği  kullanıcıların tarayıcısında yerel olarak veriyi depolayabilme imkanı sağlamaktadır. Kısaca basit bir veritabanı oluşturuyoruz diyebiliriz. Daha önce bu Cookie'lerle yapılırdı. HTML5 Web Storage ile veri depolaması Cookie 'lere göre daha güvenli ve daha hızlıdır. Veri, her Server Request'inde sayfaya dahil edilmez. Ne zaman veri çağırılırsa o zaman kullanılır. Cookie'lere göre verinin istediğimiz çağrılması bize performans açısından çok büyük yararı olucaktır. Büyük miktarlardaki verileri de HTML5 Web Storage ile depolamak mümkündür üstelik web sitenin performansını etkilemeden bu yapılmaktadır. HTML5 Web Storage ile  veriler, Key / Value (anahtar / değer) çiftleri olarak depolanır.

HTML5 Web Storage özelliğini gelişmiş tarayıcıların hepsi desteklemektedir.

HTML5 Web Storage ile Client'da (Browser'da) veriyi depolamak iki şekilde olmaktadır.

1. Local Storage : Sona erme tarihi olmadan veri depolar.
2. Session Storage : Yanlızca bir oturum için veri depolar.

Kullandığımız tarayıcıların HTML5 Web Storage özelliğini destekleyip desteklemediğini öğrenmek için aşağıdaki kodu kullabilirsiniz.

if(typeof(Storage) !== "undefined"){
  // Local Storage ve Session Storage özellikleri desteklenmektedir.
  // Kodlarımızı yazabiliriz.
}
else{
  // Tarayıcı HTML5 Web Storage özelliğini desteklenmiyor.
}

Local Storage ile Session Storage aynı method ve özelliklere sahiptir bu özellikler şu şekildedir;

• "length" yazılmış verilerin adet olarak toplam sayısını vermektedir.
• "getItem(anahtar)" girilen anahtar ismine ait veriyi döndürmektedir.
• "setItem(anahtar, değer)" girilen anahtar ismi ve değere göre veriyi depoda saklamaktadır.
• "removeItem(anahtar)" girilen anahtar ismine göre veriyi depodan silmektedir.
• "clear()" depoda depolanan tüm verileri silmektedir.

Local Storage

Local Storage nesnesi, Sona erme tarihi olmadan veriyi depolamaktadır. Veri, tarayıcı kapatıldığı zaman silinmeyecek ve istediğimiz zaman erişilebilir olacaktır.

<script>
if(typeof(Storage) !== "undefined") {
    localStorage.websayfasi = "uzmanim.net";
    document.getElementById("goster").innerHTML="Web Sayfamız : " + localStorage.websayfasi;
}
else{
    document.getElementById("goster").innerHTML="Tarayıcınız, HTML5 Web Storage özelliğini desteklemiyor.";
}
</script>

<div id="goster"></div>

Bu örneğimizde Key / Value çiftleri (key="websayfasi" ve value="uzmanim.net") ile Local Storage oluşturduk. Sonra "goster" id'li div'in içine depolanan veriyi yazdırdık. Eğer tarayıcı Web Storage özelliğini desteklemiyorsa da uyarı yazımız gelecektir. Key / Value çiftleri her zaman string olarak depolanır. İhtiyaç duyulduğunda başka bir formata dönüştürülebilir.

Artık tarayıcımız kapansa dahi verimize istediğimiz zaman ulaşabiliriz. Başka bir örnek vermek gerekirse bir sayaç uygulaması yapalım ve sayfa her yenilendiğinde sayacımız 1 artarak devam etsin bu işlem tarayıcımızı kapatsak bile tekrar açıldığında sayacımız kaldığı yerden devam edicektir.

<script>
if(typeof(Storage) !== "undefined") {
    var sayac = localStorage.getItem("sayac");  
    sayac++;  
    localStorage.setItem("sayac", sayac);  
    $("#goster").html("uzmanım.net sayacımız : " + sayac); 
}
else{
    document.getElementById("goster").innerHTML="Tarayıcınız, HTML5 Web Storage özelliğini desteklemiyor.";
}
</script>

<div id="goster"></div>

Bu örneğimizde var sayac = localStorage.getItem(“sayac”) ifadesi ile sayac anahtarında bulunan değeri çekiyoruz. Ardından sayac++ ile bu değeri 1 artırıyoruz. localStorage.setItem(“sayac”,  sayac) kodu ile sayac anahtarına yeni sayac değerini aktarıyoruz ve yeni sayac değerini #goster isimli element içinde gösteriyoruz.

Session Storage

Session Storage nesnesi, sakladığımız verilerin ömrü tab veya tarayıcı kapatılana kadardır. Tab veya tarayıcı kapantıldığında veriler silinmektedir.

<script>
if(typeof(Storage) !== "undefined") {
    var sayac = sessionStorage.getItem("sayac");  
    sayac++;  
    sessionStorage.setItem("sayac", sayac);  
    $("#goster").html("uzmanım.net sayacımız : " + sayac); 
}
else{
    document.getElementById("goster").innerHTML="Tarayıcınız, HTML5 Web Storage özelliğini desteklemiyor.";
}
</script>

<div id="goster"></div>

Bu örneğimizde yine bir sayaç uygulaması yaptık ve sayfa her yenilendiğinde sayacımız 1 artarak devam edecek bu işlem tab veya  tarayıcımız kapatılana devam edecektir. Tab veya tarayıcımız kapatıldığında ise  sayacımızın sıfırlandığını göreceksiniz.