HTML5 web depolama, çerezlerden (cookies) daha iyi.
HTML5 Web Depolama Nedir?
HTML5 ile, web sayfaları verileri kullanıcının tarayıcısına kaydedebilir.
Bu işlem önceden çerezler ile yapılırdı. Ancak Web Depolama (Web Storage) daha güvenli ve hızlıdır.
Veri, her sunucu istemine eklenmez, sadece istendiği zaman kullanılır. Bu özellik ayrıca web sitesinin performansını etkilemeden
çok büyük boyutlarda verinin saklanmasını sağlar.
Veri, isim/değer ikilileri şeklinde saklanır ve bir web sayfası sadece kendisi tarafından kaydedilen verilere ulaşabilir.
Çerezlerden farklı olarak, depolama limiti çok fazladır (en az 5 MB) ve bilgiler asla sunucuya gönderilmez.
Tarayıcı Desteği
Web Depolama Internet Explorer 8+, Firefox, Opera, Chrome ve Safari tarafından desteklenir.
HTML5 Web Depolama Nesneleri (Object)
HTML5 Web Depolama verileri istemci bilgisayarda saklamak için iki yeni nesne sağlar:
window.localStorage - Verileri son kullanma tarihi olmadan saklama
code.sessionStorage - Verileri bir oturum için saklama (Pencere kapatıldığında her şey silinir)
Web Depolama kullanmadan önce, tarayıcı tarafından desteklenip desteklenmediğini kontrol edin:
if(typeof(Storage)!=="undefined")
{
// localStorage/sessionStorage için kod kısmı.
}
else
{
// Üzgünüm... Web Depolama desteği yok...
}
LocalStorage Nesnesi
LocalStorage nesnesi, son kullanma tarihi olmadan verileri depolar. Veriler, tarayıcı kapatıldığında silinmez ve
sonraki gün, hafta hatta yıl bile kullanılabilir.
Örnek
// Kaydet localStorage.setItem("lastname", "Smith"); // Geri al
document.getElementById("result").innerHTML=localStorage.getItem("lastname");
Önce name="lastname" ve value="Smith" ile bir localstorage isim/değer ikilisi oluşturun
Sonra "lastname" içindeki değeri geri alın ve id="result" ile elementin içine ekleyin
Yukarıdaki örnek, şu şekilde de yazılabilirdi:
// Kaydet localStorage.lastname = "Smith"; // Geri al
document.getElementById("result").innerHTML=localStorage.lastname;
"lastname" değerini locastorage'den kaldırmak için gereken sözdizimi (syntax) ise şöyledir:
localStorage.removeItem("lastname");
Not: İsim/değer (Name/value) ikilileri her zaman alfa-numerik (string) olarak kaydedilir.
Gerektiğinde, onları istediğiniz formata dönüştürmeyi unutmayın!
Aşağıdaki örnek, kullanıcının bir butona kaç kez tıkladığını sayıyor. Bu kodda, string olarak kaydedilen
tıklanma sayısı, sayacın arttırabilmesi için Number() komutu ile numerik değere casting (dönüştürme) yapılıyor:
SessionStorage nesnesi sadece bir oturum için veri depolar. Bunun dışında tüm özellikleri localStorage ile aynıdır.
Tarayıcı kapatıldığında veriler silinir.
Aşağıdaki örnek, mevcut oturum içinde bir butona kaç kez tıklandığını sayar: