HTML Web Depolama API'sı
HTML web depolama; çerezlerden daha iyidir.
HTML Web Depolama Nedir?
Web depolama ile web uygulamaları, verileri kullanıcının tarayıcısında yerel olarak depolayabilir.
HTML5'ten önce, uygulama verilerinin her sunucu isteğine dahil olan çerezlerde saklanması gerekiyordu. Web depolaması daha güvenlidir ve büyük miktarda veri web sitesi performansını etkilemeden yerel olarak depolanabilir.
Çerezlerin aksine, depolama limiti çok daha büyüktür (en az 5MB) ve bilgiler asla sunucuya aktarılmaz.
Web depolama, kaynak başınadır (etki alanı ve protokol başına). Tek bir kaynaktan tüm sayfalar aynı verileri depolayabilir ve bunlara erişebilir.
Tarayıcı Desteği
Tablodaki sayılar, Web Depolamasını tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
| API | |||||
|---|---|---|---|---|---|
| Web Storage | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
HTML Web Depolama Nesneleri
HTML web depolama, istemcide veri depolamak için iki nesne sağlar:
window.localStorage- son kullanma tarihi olmayan verileri depolarwindow.sessionStorage- bir oturum için veri depolar (tarayıcı sekmesi kapatıldığında veriler kaybolur)
Web depolamayı kullanmadan önce localStorage ve sessionStorage için tarayıcı desteğini kontrol edin:
if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
}
else {
// Sorry! No Web Storage support..
}
localStorage Nesnesi
localStorage nesnesi, son kullanma tarihi olmayan verileri depolar. Tarayıcı kapatıldığında veriler silinmeyecek ve sonraki gün, hafta veya yıl içinde kullanıma sunulacaktır.
Örnek
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
Örnek açıkladı:
- name="lastname" ve value="Smith" ile bir localStorage adı/değer çifti oluşturun
- "Soyadı" değerini alın ve id="result" ile öğeye ekleyin
Yukarıdaki örnek şu şekilde de yazılabilir:
// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;
"Soyadı" localStorage öğesini kaldırmak için sözdizimi aşağıdaki gibidir:
localStorage.removeItem("lastname");
Not: Ad/değer çiftleri her zaman dizeler olarak saklanır. Gerektiğinde bunları başka bir biçime dönüştürmeyi unutmayın!
Aşağıdaki örnek, bir kullanıcının bir düğmeyi kaç kez tıkladığını sayar. Bu kodda, değer dizesi, sayacı artırabilmek için bir sayıya dönüştürülür:
Örnek
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
localStorage.clickcount + " time(s).";
sessionStorage Nesnesi
Nesne, verileri yalnızca bir oturum için depolaması dışında localStorage sessionStoragenesnesine eşittir . Kullanıcı belirli tarayıcı sekmesini kapattığında veriler silinir.
Aşağıdaki örnek, geçerli oturumda bir kullanıcının bir düğmeyi kaç kez tıkladığını sayar:
Örnek
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
}
else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";