Web depolama işlemi cookies yani çerezlerden daha işlevseldir.
HTML Web Depolama Alanı 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 edilen çerezlerde saklanması gerekiyordu. Web depolama daha güvenlidir ve büyük miktarda veri, web sitesi performansını etkilemeden yerel olarak depolanabilir.
Çerezlerden farklı olarak, depolama sınırı çok daha büyüktür (en az 5 MB) ve bilgiler hiçbir zaman sunucuya aktarılmaz.
Web depolama alanı kaynak başınadır (etki alanı ve protokol başına). Tek bir kaynaktaki tüm sayfalar aynı verileri depolayabilir ve bunlara erişebilir.
Tarayıcı Desteği
HTML Web Depolama Nesneleri
HTML web depolama, istemcide veri depolamak için iki durum sağlar:
- window.localStorage – son kullanma tarihi olmayan verileri saklar
- window.sessionStorage – bir oturuma ait verileri saklar (tarayıcı sekmesi kapatıldığında veriler kaybolur)
Web depolamayı kullanmadan önce localStorage ve sessionStorage için tarayıcı desteğinin kontrol edilmesi gereklidir.
if (typeof(Storage) !== "undefined") {
// localStorage/sessionStorage kodu.
} başka {
// Üzgünüm! Web Depolama desteği yok..
}localStorage Nesnesi
localStorage nesnesi, verileri son kullanma tarihi olmadan saklar. Veriler, tarayıcı kapatıldığında silinmeyecek ve ertesi gün, hafta veya yıl boyunca kullanıma sunulacaktır.
// Kaydetme
localStorage.setItem("soyad", "Yazilimci");
// Veri Çekme
document.getElementById("result").innerHTML = localStorage.getItem("soyad");- name = “soyad” ve değer = “Yazilimci” ile bir localStorage ad/değer çifti oluşturun
- “Soyadı” değerini alın ve onu id = “result” olan öğeye ekleyin
“soyad” localStorage öğesinin kaldırılmasına ilişkin sözdizimi aşağıdaki gibidir:
localStorage.removeItem("soyad");Not: Ad/değer çiftleri her zaman dizeler olarak saklanır. Gerektiğinde bunları başka bir formata 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 dizisi, sayacı artırabilmek için bir sayıya dönüştürülür:
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
if (typeof(Storage) !== "undefined") {
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount)+1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Butona Tıklama Sayısı ; " + localStorage.clickcount + " Kere.";
} else {
document.getElementById("result").innerHTML = "Tarayıcınız Desteklemiyor ...";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Tıkla Arttır!</button></p>
<div id="result"></div>
</body>
</html>
sessionStorage Nesnesi
SessionStorage nesnesi localStorage nesnesine eşittir ancak tek farkı, verileri yalnızca bir oturuma saklamasıdır. Kullanıcı belirli bir 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:
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
if (typeof(Storage) !== "undefined") {
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Tıklama Sayısı : " + sessionStorage.clickcount + " Tıklama.";
} else {
document.getElementById("result").innerHTML = "Tarayıcınız Desteklemiyor.";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Sayaç</button></p>
<div id="result"></div>
</body>
</html>
