HTML 5 ile web sayfaları kullanıcıların browserların da local data depolayabilir hale geldi.

Şöyle ki eskiden cookiler ile yaptığımız işlemleri artık bu yol ile daha güvenli ve hızlı şekilde yapabiliriz. Artık veriler her sunucu isteğinde değil, sadece çağrıldıklarına geliyorlar. Ayrıca çok büyük boyutlarda veriyi , web sitesinin performansını etkilemeden saklayabiliyoruz.

Bu size sayfalarda bazı dataları saklayabileceğiniz gibi native mobil uygulama yapmak yerine html5 tabanlı yapılan uygulamalarda sqlite olmadan data saklamanıza da olanak tanıyacaktır 😉

Veriler key/value şeklinde saklanıyor ve web sayfaları sadece kendi oluşturdukları verilere erişebiliyorlar.

Web storage Internet Explorer 8+, Firefox, Opera, Chrome, ve Safari tarafından destekleniyor. Internet Explorer 7 ve eski versiyonları desteklemiyor.

Web storage kullanmadan önce browserınızın bunu destekleyip desteklemediğini aşağıdaki kod ile kontrol etmenizi tavsiye ederim.

if(typeof(Storage)!=="undefined")
{
// Browser localStorage and sessionStorage destekliyor...

}
else
{
// Browser localStorage and sessionStorage desteklemiyor...
}

Şimdi sırada okuma ve yazma işlemleri için basit bir örnek:

// local storage ye isim anahtarı ile veri kaydediyoruz.
localStorage.isim = "Onur Canalp";    
// farklı bir sayfada veya aynı sayfanın farklı bir bölümünde kullanıyoruz
alert(localStorage.isim);

//Bunun birde başka yolu var, metodlar ile okuyalım
// hafızaya veri kaydetme
localStorage.setItem("isim", 'Onur Canalp');
// geri çağırma 
alert(localStorage.getItem("isim"));

Bu veriler uzun süre saklanıyordu, silmek için ne yapmalı hemen buna bakalım;

// sadece istediğimiz elemanı silmek için bunu kullanırız.
localStorage.removeItem("isim");

// eğer hafızadaki bütün kayıtları silmek istersek clear parametresini kullanırız
localStorage.clear();

Not : key/value çiftleri string olarak tutulur, gerektiğinde başka formata çevirmeyi unutmayın.

sessionStorage Nesnesi 

sessionStorage nesnesi aynı local storage gibidir fakat tek session için geçerlidir. Browser kapatıldığında silinir.  Hemen hemen aynı sayılır:

sessionStorage.length; // 0

sessionStorage.setItem("isim", "onur");
sessionStorage.getItem("isim"); // onur

sessionStorage.length; // 1

sessionStorage.key(0); // isim

sessionStorage.removeItem("isim");

sessionStorage.length; // 0

Umarım açıklayıcı olabilmiştir, herkese iyi çalışmalar..