banner
htmldersleri
Ana SayfaANA SAYFA Dersler | Örnekler | Forum | Sıkça Sorulan Sorular |Hakkında
HTML Temel
HTML Giriş
HTML Elementler
HTML Etiketler
HTML Parametreler
HTML Biçimlendirme
HTML Özeller
HTML Bağlantılar
HTML Çerçeveler
HTML Tablolar
HTML Listeleme
HTML Formlar
HTML Resimler
HTML Arka Plan
HTML Renkler
HTML Renk Değerleri
HTML Renk İsimleri
HTML Hızlı Liste

HTML5 Ana Menü
HTML5 Giriş
HTML5 Anlamlandırma
HTML5 Giriş Tipleri
HTML5 Form Elementleri
HTML5 Form Özellikleri
HTML5 Canvas
HTML5 SVG
HTML5 Video
HTML5 Audio
HTML5 Konum
HTML5 Sürükle/Bırak
HTML5 Web Depolama
HTML5 Uygulama Bellekleme
HTML5 Web Çalışanı
HTML5 SSE

HTML Gelişmiş
HTML Tasarım
HTML Fontlar
HTML Stiller
HTML Başlık
HTML Meta
HTML URL
HTML Scriptler
HTML Std. Nitelikler
HTML Olaylar
HTML ASCII
HTML Web Sunucu

HTML Örnekler/Test
HTML Örnekler
HTML Örnek Site
HTML Test

HTML5 Web Depolama

Önceki Sonraki

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

Internet Explorer Firefox Opera Google Chrome Safari

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");

Kendin Dene »

Örneğim açıklaması:

  • Ö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:

Örnek

if (localStorage.clickcount)
  {
  localStorage.clickcount = Number(localStorage.clickcount) + 1;
  }
else
  {
  localStorage.clickcount = 1;
  }
document.getElementById("result").innerHTML="Siz " +
localStorage.clickcount + " kere butona tıkladınız.";

Kendin Dene »


SessionStorage Nesnesi

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:

Örnek

if (sessionStorage.clickcount)
  {
  sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
  }
else
  {
  sessionStorage.clickcount = 1;
  }
document.getElementById("result").innerHTML="Bu oturumda " +
sessionStorage.clickcount + " kere butona tıkladınız.";

Kendin Dene »


Önceki Sonraki

Dersler | Örnekler | Forum | Sıkça Sorulan Sorular |Hakkında
Copyright © 2008 | Tüm Hakları Saklıdır. | Webmaster: destek@htmldersleri.org

80 kişi şuan sayfamızda geziniyor.

English Deutsch Français Español Dutch Italiano Português Български
html dersleri
Dersler Örnekler Online Test