HTML5 Web Storage-Yerel Depolama

Onceki derslerimizde cookies/cerezler basligi altinda yerelde veri saklama ve bu verileri elde etme yollarini ogrendik. Fakat bu yontemin birtakim sorunlari vardir.

  • Oldukca az bir veri alani(ortalama 4kb gibi)
  • Guvenlik Sorunu olusturabilir
  • Performansi etkileyebilir
  • Oturum karisikligi olusturabilir



Web Storage API : Istemci tarafinda veri saklama isini oldukca guvenli ve fonksiyonel hale getirmistir.
cookielere gore oldukca avantajlidir.
  • Daha guvenli bir yontem
  • Saklanabilecek veri miktari KB duzeyinden MB seviyesine ulasmistir
  • Cookilerde yasanabilecek oturum karmasasi burda gorulmez
  • Performans sorunu olusturmaz
  • ...


Verileri yerelde saklamak isini asagida aciklanan iki yeni nesne ile yapar.
localStorage(Yerel Depolama):Istemci tarafinda son kullanma tarihi olmayan verileri depolar,tarayici kapatilip acilsa bile verilere tekrar ulasilabilir.
sessionStorage(Oturum Depolama):Veriyi oturum bazinda saklar. (sadece 1 oturum icin,Tarayici sekmesi kapatilinca veri silinir.)


LocalStorage Ornegi


LocalStorage hakkinda yazilanlari dikkatle incelemelisiniz zira sessionStorage ufak ama onemli bir ayrinti disinda localStorage gibi kullanilir
(Cunku ikiside Storage arayuzunde tanimli metot ve ozelliklerini kullanirlar konsoldan alinmis asagidaki resmi inceleyebilirsiniz veya konsoldan asagida acikladigmiz metotlari test edebilirsiniz )
LocalStorage

Gerekli aciklamalari ornek uzerinde veriyorum.
<button onclick="localStorageKayit()">Kayit Yap</button> 
     <button onclick="localStorageOku()">Kayit Oku</button>
     
     <script>
   function localStorageKayit(){
        
        //Oncelikle bu islem icin tarayicinin destegi varmi bakalim
        //Bu islem icin farkli yontemler kullanilabilir
        if(typeof(Storage)!=="undefined"){
            //Evet destek var anahtar-deger formatindaki veriyi ekleyelim
            localStorage.setItem("dersimiz","JAVA");
        }else{
            alert("Bu islem icin tarayicinizin Web Storage destegi yok");
        }
   }
    
    function localStorageOku(){
        var dersimiz=localStorage.getItem("dersimiz");
        if(dersimiz!=null){
            alert("dersimiz="+dersimiz);
        }else{
            alert("Sanirim bu kayit yapilmadi :(");
        }
    }

</script>
     
     


Asagidaki tabloda yer alan islemleri test ederken console ortamindan sonuclar gozlemlemek daha etkili olabilir ayni zamanda consoldan dogrudan anahtar deger ciftleri girebilirsiniz.
setItem(anahtar,deger) Ikili bir veri cifti olusturmak icin kullanilir ayrica asagidaki gibi kullanimlarida tercih edebilirsiniz
localStorage.setItem("dersimiz","JAVA");
localStorage["dersimiz"]="JAVA";
localStorage.dersimiz="JAVA";
getItem(anahtar) Anahtar degeri verilen degeri dondurur.
Ayrica asagidaki gibi kullanimlarida tercih edebilirsiniz
(benzer sekilde alternatif get yontemlerinide deneyebilirsiniz.)
removeItem(anahtar) Verilen degeri siler.
<button onclick="kayitYap()">Kayit Yap</button>
<button onclick="kayitOku('html')">Kayit Oku</button>
<button onclick="kayitSil()">Kayit Sil</button>


<script>
function kayitYap(){localStorage.setItem("html","Web Storage!");}
function kayitSil(){localStorage.removeItem("html");}
function kayitOku(anahtar){alert(localStorage.getItem(anahtar));}
</script>
clear() Tum verileri Siler
localStorage.clear();
key() indeks numaralarindan faydalanarak anahtar isimlerini elde etmeye yarar. ihtiyac olmasi halinde elde edilen anahtar isimleriyle de tum degerler elde edilebilir.
function anahtarIsimleri(){
	var i;
	var boyut=localStorage.length;
	var mesaj="";
	for(i=0;i<boyut;i++){
		mesaj +=localStorage.key(i)+"\n";
	}

	alert(mesaj);
}


sessionStorage Ornegi

sessionStorage:Sadece 1 oturum icin verileri saklar demistik bunun disinda genel olarak kullanim sekli localStorage gibidir.


<button onclick="sessionKayit()">Kayit Yap</button>
<button onclick="sessionOku()">Kayit Oku</button>
<button onclick="sessionSil()">Kayit Sil</button>


<script>

//yukardaki orneklerde oldugu gibi destek kontrolu yapabilirsiniz !!
function sessionKayit(){
    sessionStorage.setItem("ders1","Matematik");
    sessionStorage.setItem("ders2","Geometri");
}

function sessionOku(){
	alert(sessionStorage.getItem("ders2"));
}

function sessionSil(){
	sessionStorage.removeItem("ders2");
}
    
</script>

Bu derse ait gorus ve onerilerinizi yada farkettigniz hatalari Lutfen bana bildirin!
birbyte.net@gmail.com