Local Storage vs Session Storage

3 yıl önce @dgamze tarafından oluşturuldu· localstorage, sessionstorage, web, webstorage, javascript

 HTML5 ile ortaya çıkan Web Storage özelliği kullanıcıların tarayıcısında yerel olarak veriyi depolamasını sağlamaktadır.HTML5 Web Storage güvenli ve hızlıdır. HTML5 Web Storage da veri ne zaman çağrılırsa o zaman kullanılır. Bu da performans açısından bize çok büyük katkı sağlar. HTML5 Web Storage'ı tüm gelişmiş tarayıcılar destekler.


Web Storage API ikiye ayrılır.

*Local Storage
*Session Storage


Bu iki mekanizmada, sayfa oturumu süresince kullanılabilir her kaynak için ayrı bir depolama alanı sağlar. Local Storage ve Session Store , bir tarayıcı da "key,value" değerlerinin kaydedilmesine izin verir.


Local Storage: Son kullanma tarihi olmayan verileri depolar. Tarayıcı kapansa bile veriler silinmez ve her zaman ulaşabilirsiniz.

Session Storage: Yalnızca bir oturum süresi için tarayıcıya kaydedilmesine izin veren bir özelliktir. Yeni tarayıcı sekmesi açıldığında veriler kaybolur. Aynı anda birden çok pencerede işlem gerçekleştirilebilir.


Session Storage ve Local Storage 5 temel methoda sahiptir. Bunlar;


*setItem()

*getItem()

*removeItem()

*key()

*clear() metodlarıdır.



setItem()


Bu method local storage ve session storage için veri eklerken kullanılır. İçerisine "key" ve "value" değerlerini alır.

localStorage.setItem('key', 'value');
localStorage.setItem('name', 'Dilek');
sessionStorage.setItem('key', 'value');
sessionStorage.setItem('name', 'Gamze');


if (typeof(Storage) !== "undefined") {
  // Store
  localStorage.setItem("lastname", "Smith");
}


getItem():


Bu method parametre olarak "key" değeri alır ve "value" döndürür. Eğer "key" değerinin bir karşılığı yoksa null döndürür.


localStorage.setItem('name','Gamze')
localStorage.setItem('name')  // output:Gamze

localStorage.setItem('name','Gamze')
localStorage.setItem('lastName') // output:null



key():


Seçilen indexteki "key" değerini bize return eder. Parametre olarak sayı alır.

localStorage.key(i);
localStorage.key(0);    //output: "name"


removeItem():


Seçilen veriyi silerken kullanılır. Parametresi "key"

sessionStorage.removeItem('lastname');
sessionStorage.getItem('lastname'); // output: null


clear():


Bu method çağrıldığında local storage ve session storage içerisindeki tüm veriyi temizler.


localStorage.clear();