HTML5 Web Storage API – localStorage ve sessionStorage

11 Kasım 2013
Bu yazıyı beğendiysen paylaşmayı unutma :)
Pin It

HTML5 ile birlikte gelen depolama çözümlerinden ikisini oluşturan localStorage ve sessionStorage, geliştiriciler için pek çok kullanım kolaylığı ve fayda ile geliyor. Üstelik hem web hem mobil ortamda rahatlıkla kullanılabiliyor. Bu yazıda HMTL5’in bu iki güzel özelliğini inceleyeceğiz.

localStorage

localstorage, HTML5‘in istemci tarafında çalışan kalıcı yerel depolama çözümü olarak karşımıza çıkan özelliklerden biri. Web veya mobil uygulamanızda bu tarz bir depolamaya ihtiyaç duyduğunuzda, rahatlıkla kullanımına başvurabileceğiniz seçeneklerin başında geliyor.

local Storage’e kadar web teknolojilerine baktığımızda açık ara en popüler seçenek Cookie diye isimlendirdiğimiz çerezler oldu. Halen web sitelerinde yoğun olarak kullanılan çerezler, hem 4KB‘lık oldukça küçük boyutuyla sınırlı hem de HTTP isteklerine yük olması gibi bir dezavantaja da sahip.

Peki localStorage’in ne gibi faydaları bulunuyor?

1. Verilerinizi Key/Value şekilde saklamanıza olanak verir.
2. Bulunduğunuz web sayfası yenilense dahi bilgileriniz tutulmaya devam eder.
3. Cookie’lerin HTTP yükünden sizi kurtarır, daha az bantwidth kullanmanızı sağlar.
4. Kullanıcı tercihlerini tutmak ve hatırlamak için oldukça kullanışlıdır.
5. Herhangi bir geçerlilik süresi yoktur.
6. Tarayıcısına göre değişse de depolama alanı 2MB ile 10MB arasında değişiklik gösterir. Bu miktar Google Chrome’da 2MB, Firefox’ta 5MB, Internet Explorer’da 10MB’tır. Bu Cookie’lerin sağladığı 4KB’tan çok daha fazladır!
7. Kullanılan tarayıcının önbelleği manuel olarak silinmediği sürece saklanılan verileri tutmaya devam eder.

Tarayıcı Desteği

Google Chrome 4+, Firefox 4+, Safari 4+, Opera 11+, Internet Explorer 8+, iOS 3.2+, Android Browser 3+ ve Opera Mobile 11+ tarayıcıları destekliyor olsa da, önlem açısından tarayıcının localStore’i destekleyip desteklemediğini kontrol etmek önemli bir alışkanlıktır. Bu işlemi aşağıdaki şekilde yapabiliriz.

function isStorageSupport() {
	try {
	    return 'localStorage' in window && window['localStorage'] !== null;
	} catch (e) {
	    return false;
	}
}

if(isStorageSupport)
{
	alert("Tarayıcınız localStorage'yi destekliyor!");
}

localStorage’in Kullandığı Metotlar

.key(index): Belirtilen konumdaki anahtarların adını döndürür.
Kullanım şekli: window.localStorage.key(index)

.getItem(key): Belirtilen anahtarın değerini geri döndürür.
Kullanım şekli: window.localStorage.getItem(key)

.setItem(key, value): Belirtilen anahtara bir değer belirlenmesini sağlar.
Kullanım şekli: window.localStorage.setItem(key, value)

.removeItem(key): Belirtilen anahtarı siler.
Kullanım şekli: window.localStorage.removeItem(key)

.clear(): Tüm key/value çiftlerinin tamamını siler.
Kullanım şekli: window.localStorage.clear()

localStorage’in Kullandığı Özellikler

.length: Kayıtlı anahtarların sayısını döndürür.
Kullanım şekli: window.localStorage.length

localStorage ile JSON kullanımı

Yukarıda anlatmış olduğum localStorage kullanımlarındaki değerler string tipindeki key ve value’lardan oluşuyordu. Ancak localStorage ile aynı zamanda JSON depolaması yapmanız da mümkün. Bunun için bir JSON nesnesini string tipine dönüştürmeyi sağlayan JSON.stringify ve bir stringi JSON nesnesine dönüştürmeyi sağlayan JSON.parse yöntemlerinden faydalanacağız. Bunu küçük bir örnekle inceleyelim.

Öncelikle “user” key’i içerisine JSON.stringify kullanarak “list” anahtarı altında iki kayıttan oluşan ve her kaydı 3 field’tan oluşan bir JSON stringini aşağıdaki gibi saklayalım.

window.localStorage.setItem("user", JSON.stringify({"list": [
                { "firstName":"Zeynep" , "lastName":"Mede" , "id":10 },
                { "firstName":"Meral" , "lastName":"Demirsoy" , "id":10  }
                ]}));

Depolama işlemimizi tamamladığımıza göre şimdi bu bilgileri gösterelim. Tanımlamış olduğumuz “user” key’ine göre aşağıda olduğu gibi “getItem” metodunu kullanarak çekelim ve elde ettiğimiz JSON Stringini JSON.parse yardımı ile “users” isimli bir JSON nesnesinde toplayalım.

//users isimli JSON Objesi
var users = JSON.parse(window.localStorage.getItem("user"));
// users.list içerisinde kaç kayıt olduğunu döndürür. Örneğimize göre 2 döner.
console.log("users.length: " + users.list.length);

Artık elimizde “users” ismine sahip bir JSON nesnesi bulunuyor. Artık bu nesne içerisinden kolayca verileri alabiliriz.

for (user in users.list) {
            console.log("Kayıt Sırası: " + user + " - id: " + users.list[user].id + " - firstName: " + users.list[user].firstName + " - lastName: " + users.list[user].lastName);
}

Resmi büyütmek için üzerine tıklayınız

Örneğimizi bir adım sonraya taşıyacak olursak bu JSON nesnesi içerisinde aşağıdaki gibi arama işlemi de yaptırabiliriz.

var results = [];
var searchField = "id";
var searchValue = "11";

for (var i=0 ; i < users.list.length ; i++)
{
            if (users.list[i][searchField] == searchValue) {
                results.push(users.list[i].firstName);
}
}
for (u in results)
{
            console.log("Search Results: Aradığınız kişinin Adı: " + results[u]);
}

Resmi büyütmek için üzerine tıklayınız

sessionStorage

sessionStorage’in tüm kullanım metot ve özellikleri aynen localStorage’te olduğu gibidir. Ancak çalışma şekli farklılıkları bulunuyor. Bunları şu şekilde ifade edebiliriz.

1. localStorage, manuel olarak tarayıcı önbelleği silinmediği sürece ya da kod kullanarak localStorage’yi temizlemediğiniz sürece saklama işlemine devam eder. sessionStorage ise tarayıcınız açık kaldığı sürece verilerinizi saklar. Tarayıcınızı kapattığınızda sessionStorage içerisinde sakladığınız verileri kaybedersiniz.

2. Bulunduğunuz URL adresi içerisinden aynı siteye ait başka bir sayfaya yeni bir tab ya da yeni bir sayfa açarak geçtiğinizde yeni bir oturum başlar. Verileriniz o yeni sayfaya taşınmaz. localStorage içerisinde ise verilerinize erişebilirsiniz.

3. sessionStorage ikinci maddede belirttiğim sebeplerden ötürü aynı sayfa içerisindeki, kısa süreli veriler için kullanılmalıdır.

NOT: HTML5 localStorage ve sessionStorage’i kolayca kullanmak isteseniz, yazdığım ve GitHub üzerinden yayınladığım myToolsJS isimli kütüphanemi kullanabilirsiniz.

https://github.com/egemenmede/myToolsJS

Bir sonraki yazıda Web Storage API’nin ikinci bölümü olan veritabanı konusunu inceleyeceğiz.

Benzer Yazılar


DeliPenguen'i Google+'da bulun