HTML5 Local Web Storage Kullanımı

HTML5’in en sevdiğim özelliklerinden birisi kullanıcının aygıtında veri depolayabiliyor olması. Bunu biraz daha açarsak, web uygulamanızı ya da internet sitenizi kullanan cihazların tarayıcıları yardımı ile 5MB’a kadar yerel veri depolayabiliyorsunuz.

5MB sınırının başlangıçta biraz sinir bozucu gibi olduğunu düşünebilirsiniz fakat genel anlamda sadece o kullanıcıların kullanacağı verilerin sınırlı -5mb’ı geçmeyecek- olduğunu ve çoğu kötü amaçlı kişilerin durumu süistimal edebileceği gerçeği böyle bir sınırın varlığını mantıklı yapıyor.

localStorage.setItem("isim", "Burak"); 
// isim itemini burak değişkeni ile depoluyorum.
alert(localStorage.getItem("isim"));
// isim itemini local depodan istiyorum.

Verdiğimiz örnek çok kullanışlı gözükmese de, set ettiğiniz item, kullanıcı siteden çıktığında, tarayıcısını kapattığında hatta ve hatta bilgisayarını/telefonunu kapattığında da orada oluyor. Yani kullanıcının başka bir kez giriş yaptığında bu datayı, kullanıcının tarayıcısından pull edebiliyorum.

localStorage.removeItem("isim");
// ek olarak bu datayı kullanıcının
// tarayıcısından silebiliyoruz.

Bu özellikle yapabileceğiniz şeyleri bir düşünsenize.. Özellikle hibrit uygulamalar yazarken büyük bir kullanımı olabilir, herhangi bir sunucuya bağlanmadan offline bir şekilde kullanıcının oluşturduğu datayı tarayıcı üzerinde tutabilir ve sonrasında kullanıcıya tekrar sunabilirsiniz.

Bu özellik aslına bakarsanız kullanıcıdan başka kimsenin bilmesi istenmeyen bilgilerin depolanmasında kullanımı akıllıca olabilir. Örneğin ben bir kullanıcı olarak yaşımın bir database üzerinde tutulmasını istemeyebilirim, bu gibi bir durumda bu datayı kullanıcının kendi tarayıcısı üzerinde rahatlıkla tutabilirsiniz.

LocalStorage Tarayıcı Uyum Tablosu

Yeni bir özellik olduğundan bazı tarayıcıların eski sürümleri tarafından desteklenmiyor. Destek tablosunu üstteki resimde görebilirsiniz.

if(typeof(Storage) !== "undefined") {
 // web storage destekleniyor.
}else{
  // web storage desteklenmiyor.
}

Ek olarak Javascript üzerinde özelliğin desteklenip desteklenmediğini typeof() metodu ile kontrol edebilirsiniz.

Yorumları Göster veya Yeni Yorum Yaz