HTML 5 Web Storage Nedir ?

12 Ocak 2017
Html & CSS
0 Yorum

İki türde depolama yapılmaktadır.
1) LocalStorage
2) SessionStorage

LocalStorage : Cookie gibidir. Bir kez oluşturulduktan sonra kullanıcı ya da siz silene kadar bilgisayarında depolanmaktadır.
SessionStorage : Kullanıcının oturumu açık olduğu sürece depolanıyor. Oturum kapandığında(Tarayıcı kapandığında) depolanan bilgi silinmektedir.

Local ve Session ayrı ayrı 2 metoda sahiptir onlar ;
setItem() ve getItem()

setItem : İçerisine değer atanır
getItem : Atanan değere anahtar ile erişilmektedir.

Örnek : setItem(anahar,deger)
Örnek : getItem(anahtar)SessionStorage Oluşturma
sessionStorage.setItem("adsoyad","Ali DOĞAN");

SesstionStorage Okuma
sessionStorage.adsoyad veya sessionStorage.getItem("adsoyad");

LocalStorage Json Formatta Oluşturma

localStorage.users = JSON.stringify([
{ 'Ad': 'Ali', 'Soyad' : 'Doğan' },
{ 'Ad' : 'Ahmet', 'Soyad' : 'Doğan' }
]);

LocalStorage Silme
delete localStorage.users;

Detaylı bir örnek ile açıklayalım ;

index.html ve script.js oluşturuyoruz. Index.html içersinde jquery dahil ediyoruz ardından script.js'yi projeye dahil ediyoruz.

<Body>'den sonra ;

<div class="background">
Arka plan rengini seç
<a href="#" data-color="red">Kırmızı</a>
<a href="#" data-color="blue">Mavi</a>
<a href="#" data-color="orange">Turuncu</a>
</div>

script.js dosyamız
İlk fonksiyonda arkaplan reng'ini atıyoruz. İkici fonksiyonda localStorage.color dolu ise arkaplanı set ediyoruz.

Örneği indirmek için tıklayın