Web Storage API nedir?

HTML5 ile hayatımıza giren Web Storage API; kullanıcıların tarayıcısında javaScript yardımıyla veri depolamamıza imkan veren bir özelliktir. Eskiden bu işlemleri Cookie'lerle yapıyorduk. Cookie'lere erişim sunucu (Server) ve istemci (Client) taraflarından sağlanabilirken Web Storage'e erişim sadece istemci tarafından sağlanabilir. Bu durum Web Storage açısında bir dezavantaj gibi görünsede aslında sunucuya yapılan her istekte çerezleri de sunucuya gönderme yükünden kurtuluyoruz. Web Storage'te 5MB veri saklayabilmeniz onu Cookie'den daha cazip hale getiriyor.

Web Storage işlemlerinde Local Storage ve Session Storage yapılarını kullanıyoruz. Ben makalede örneklerimi Local Storage üzerinden vereceğim. Local Storage ile Session Storage hemen hemen birbirinin aynı özelliklere sahiptir. Local Storage'e yazdığınız veri siz silmediğiniz sürece korunurken Session Storage'e yazdığınız veri tarayıcıyı kapatmanız ile silinecektir.

İçerik

1. Local Storage'e veri kaydetme
2. Local Storage'ten anahtar ile veri çekme
3. Local Storage'ten indeks numarası ile veri çekme
4. Local Storage'ten anahtar ile veri silme
5. Local Storage'e kayıtlı tüm verileri silme
6. Local Storage'e nesne kaydetme
7. Local Storage'ten nesne çekme
8. Local Storage'e kayıtlı tüm verileri döndürme

Local Storage'e veri kaydetme

Aşağıda görüleceği gibi Local Storage içerisine veri eklemek için localStorage.setItem(key, value) metodunu kullanıyoruz.

localStorage.setItem('name', 'Birol');
localStorage.setItem('surname', 'Apaydın');
localStorage.setItem('age', 33);          

Local Storage'ten anahtar ile veri çekme

Local Storage'e eklediğimiz verileri localStorage.getItem(key) metodunu kullanarak çekiyoruz.

var name = localStorage.getItem('name');
var surname = localStorage.getItem('surname');
var companyName = localStorage.getItem('age');         

Local Storage'ten indeks numarası ile veri çekme

Local Storage'e eklediğimiz verilerin anahtarını localStorage.key(index) metodu ile eklenme sırasına göre çekebiliyoruz. Buradan elde ettiğimiz anahtarı yine localStorage.getItem(key) metodunda kullanarak veriyi çekiyoruz.

var name = localStorage.getItem(localStorage.key(0));
var surname = localStorage.getItem(localStorage.key(1));
var companyName = localStorage.getItem(localStorage.key(2));         

Local Storage'ten anahtar ile veri silme

Local Storage'ten tek tek veri silmek için localStorage.removeItem(key) metodunu kullanıyoruz.

localStorage.removeItem('name');
localStorage.removeItem('surname');
localStorage.removeItem('age');         

Local Storage'e kayıtlı tüm verileri silme

Local Storage'e kayıtlı tüm verileri silmek için localStorage.clear() metodunu kullanıyoruz.

localStorage.clear();

Local Storage'e nesne kaydetme

Local Storage'e nesne kaydetmek istediğimiz nesnemizi JSON.stringify(object) metodu ile JSON formatına çeviriyoruz ve yine localStorage.setItem(key, value) metodu ile Local Storage'e kaydediyoruz.

var user = { name: "Birol", surname: "Apaydın", age: 33};
localStorage.setItem('user', JSON.stringify(user));         

Local Storage'ten nesne çekme

Local Storage'e eklediğimiz verileri localStorage.getItem(key) metodunu kullanarak çekiyoruz.

var user = JSON.parse(localStorage.getItem('user'));

Local Storage'e kayıtlı tüm verileri döndürme

Local Storage'e kayıtlı kaç adet veri olduğunu localStorage.length sayesinde öğreniyoruz, elde ettiğimiz sayıyı for döngüsünde kullanıyoruz, localStorage.key(index) ile anahtarları buluyor ve bu anahtarları localStorage.getItem(key) metoduna vererek verilerimizi çekiyoruz.

for (var i = 0; i < localStorage.length; i++){
    console.log('Anahtar: ' + localStorage.key(i), 'Değer: ' + localStorage.getItem(localStorage.key(i)));
}