“Measuring programming progress by lines of code is like measuring aircraft building progress by weight.”
by Bill Gates

HTML5 ile Gelen Yeni Bir Özellik Web Storage

Tarih: Aralık 26th, 2010 | Yazar: | Kategoriler: HTML5, Javascript | Etiketler: , , | 4 Yorum »

Web Storage özelliği tarayıcı tarafında verir saklamamızı sağlıyor yani basit bir veritabanı diyebiliriz. Bir anahtar(key) birde bu anahtara bağlı olan değer(value) vasıtası ile verilerimizi depoluyoruz Web Storage ile.

Tarayıcı tarafında veri saklamak yeni bir özellik değil, yıllardır çerezler(cookies) ile bu işlemi yapıyorduk ve hala yapmaya devam ediyoruz aslında.

Peki Web Storage’ın bize getirdiği avantajlar neler?

  1. Bildiğiniz üzere çerezler sadece tarayıcı tarafındaki uygulamaların bilgi bilgi saklaması için geliştirilmemiştir. Çerezler aynı zamanda sunucu üzerinden tarayıcıda bilgi saklamak içinde kullanılır. Bu  yüzden her çerez sunucuya gönderilmek zorundadır.Açmak gerekirse siz tarayıcıda javascript kullanarak bir çerez oluşturup bu çereze teorik olarak 1MB boyunda bir değer girdiğinizde her http isteği için tarayıcı bu 1MB boyuntundaki veriyi sunucuya gönderecektir ve bu şekildeki kullanım gereksiz bir hantallığa yol açacaktır. Bu noktada imdadımıza Web Storage yetişiyor. Web Storage ile sakladığımız veriler http isteklerinde sunucuya gönderilmeyecektir.
  2. Web Storage ile çerezlerden daha kullanışlı ve kolay veri saklıyabiliyoruz.

Web Storage kaça ayrılır.

Web Storage ikiye ayrılır;

  1. Session Storage.
  2. Local Storage.

Session Storage: “Storage” nesnesinden türetilmiştir. Session Storage ile sakladığımız verilerin ömrü tarayıcı kapana kadardır. Tarayıcı kapandıktan sonra bu veriler imha edilir.

Local Storage: Session Storage da olduğu gibi yine “Storage” nesnesinden türetilmiştir. Local Storage daki verilerin ömrü ise sonsuzdur. Yani Local Storage ile şuan yazdığımız bir veriyi bir yıl sonrada okuyabiliriz. Tabi ki tarayıcının başına kötü birşey gelmez ise 🙂

Session Storage ile Local Storage aynı method ve özelliklere sahiptir bunlar;

  • length” yazılmış verilerin adet olarak toplam sayısını verir.
  • getItem(anahtar)” girilen anahtar ismine ait veriyi döndürür.
  • setItem(anahtar, değer)” girilen anahtar ismi ve değere göre veriyi depoda saklar.
  • removeItem(anahtar)” girilen anahtar ismine göre veriyi depodan siler.
  • clear()” depoda saklanan tüm verileri siler.

Hangi tarayıcılar Geolocation destekliyor?

Buradan hangi tarayıcıların Geolocation’a destek verdiğine bakabilirsiniz. Ayrıca buradan kullandığınız tarayıcının destek verip vermediğini test edebilirsiniz.

Nasıl Kullanabiliriz?

Çok basit bir sayaç uygulaması ile kullanımına bakalım.

  var sayac = localStorage.getItem("sayac");
  sayac++;
  localStorage.setItem("sayac", sayac);
  $("#sayac").html("Sayac: " + sayac);

var sayac = localStorage.getItem(“sayac”) ile sayac anahtarına bağlı değeri çekiyoruz.

sayac++ ile bu değeri bir artırıyoruz.

localStorage.setItem(“sayac”,  sayac) kodu ile sayac anahtarına yeni sayac değerini ayarlıyoruz ve yeni sayac değerini #sayac elementine aktarıyoruz. Hepsi bu kadar!

Bundan sonra tarayıcımız kapansa dahi yine sayacın bulunduğu sayfa açıldığında sayaç değeri kaldığı yerden artmaya devam edecektir.

DEMO

Kaynaklar:


4 Yorum Var

  1. 1 Veysi Ertekin said at 17:24 on Aralık 27th, 2010:

    Bir de şöyle bir kullanımıda var:

    localStorage[‘x’]=23 // localStorage’in yeni x değişkenini 23 yaptık.

    /* ——————– */

    alert(localStorage[‘x’]); // Bu satırlada localStorage’deki x değişkeninin içeriğine eriştik.

  2. 2 Veysi Ertekin said at 17:27 on Aralık 27th, 2010:

    localStorage[‘x’]=”” // Bu satırla da x değişkeninin içeriğini sildik

  3. 3 evren öztürk said at 13:51 on Nisan 22nd, 2012:

    merhaba burada sadece string mi tutabiliyoruz mesela çok grafik veya video oaln bir sitede obje olarak grafik veya videotu local stroge’de tutabilir miyiz.

  4. 4 Mesut Turan said at 12:34 on Eylül 25th, 2013:

    Paylaşım için teşekkürler.


Yorum Yap