HTML5'te Yerel Depolama
Lisans:
Creative Commons
11.12.2020
tarihinde güncellendi
Bakabileceğiniz Etiketler:
Eğitmen:
Geleceği Yazanlar Ekibi
HTML5'te web sayfaları, veriyi yerel (local) olarak, tarayıcı (browser) içinde saklayabilir. Veri, sadece sorgulama olduğu zaman kullanılır; eskisi gibi sunucunun her talebinde verinin tekrar yüklenmesi söz konusu değildir. HTML5'in bir diğer büyük avantajı ise, web sitesi ya da mobil uygulamanın performansını kötü etkilemeden, büyük miktarlarda veri depolama olanağı sağlamasıdır. Veriyi, yerelde saklamak için HTML5'in sağladığı iki yeni nesne mevcuttur:
- localStorage: Son kullanma tarihi söz konusu olmadan veriyi depolama olanağı sağlar. Örneğin, istemci tarafında kimlik doğrulama bilgisinin saklanması gibi.
- sessionStorage: Veriyi sadece bir oturum için saklar.
Çerezler (Cookies)
HTML5'ten önce, veriyi yerelde saklamak için tek yol çerezlerdi. En basit tanımıyla çerez, istemci makinasına kopya edilmiş bir metin dosyasıdır. Çerezlerin hiç şüphesiz bazı sakıncaları mevcuttu;
- Performans azalması
- Maksimum 4KB bellek alanı
- Güvenlik sorunları
Yerelde depolama
Yerelde depolama işlemi çok basittir. Tek yapmanız gereken şey, JavaScript'teki localStorage nesnesinde değişiklik yapmanızdır. Bunu aşağıdaki fonksiyonlar yardımıyla gerçekleştirebilirsiniz:
- setItem(anahtar,deger): Bir veritabanı anahtar /değerini saklamak için kullanılır.
localStorage.setItem("perikles","personel");
- getItem(key): Bir anahtar yardımıyla değer gönderir.
sessionStorage.getItem('bosfor'); // bosfor anahtardır.
- removeItem(key): Veritabanından verilen anahtar ile ilişkili verinin silinmesini sağlar.
localStorage.removeItem("bosfor"); // bosfor anahtarıdır.
- clear(): Bütün anahtar/değer çiftlerini localStorage nesnesinden siler.
localStorage.clear();
En basit tarzda ifade edersek, yerel veritabanında bir şey saklamak isterseniz, bir anahtar değeriyle ilişkili olarak bir veri yüklemelisiniz.
<!DOCTYPE html>
<html>
<body>
<div id="MITAT"></div>
<script>
// Check browser support
if (typeof(Storage) != "undefined") {
// DEPOLA
localStorage.setItem("SOYAD", "UYSAL");
// VERIYE ERIS
document.getElementById("MITAT").innerHTML = localStorage.getItem("SOYAD");
} else {
document.getElementById("MITAT").innerHTML = "TARAYICINIZDA WEB STORAGE OZELLIGI YOK";
}
</script>
</body>
</html>
Daha geniş bir örneği, aşağıdaki kod parçasında bulabilirsiniz:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>VERIYI YEREL BELLEKTE SAKLA</title>
<script>
function sendData() {
var ANAH = document.getElementById('ANAH').value;
var DEGER = document.getElementById('DEGER').value;
localStorage.setItem(ANAH, DEGER);
}
</script>
</head>
<body>
<h1>VERIYI YEREL BELLEKTE SAKLA</h1>
<form>
<div>
<label for="ANAH">ANAH: </label>
<input type="text" id="ANAH" name="ANAH" placeholder="ANAH" />
</div>
<div>
<label for="DEGER">DEGER: </label>
<input type="text" id="DEGER" name="DEGER" placeholder="DEGER" />
</div>
<button type="submit" onclick="sendData()">VERIYI GONDER</button>
</form>
</body>
</html>
JSON biçimini kullanılarak yerelde veri depolama
JavaScript nesnelerini saklamak isterseniz, onları önce JSON stringi haline dönüştürmelisiniz. Aşağıdaki örnek bu konuda size iyi bir fikir verecektir:
var komp_veri = [1, 2, 3, 4, 5, 6];
localStorage.setItem("veri anahtarları", JSON.stringify(komp_veri));
var depo_veri = localStorage.getItem("komp_veri");
if (depo_veri) {
komp_veri = JSON.parse(depo_veri);
}
Depolama olayları (Events)
Bir depolama olayı, bir yerel depolama özelliği ya da oturumunu eklediğiniz, güncellediğiniz ya da sildiğiniz zaman meydana gelir. Bu tür bir olayı yakalamak için, bir JavaScript "event listener" nesnesinin kullanımına ihtiyaç vardır:
function onStorageEvent(storageEvent){
alert("DEPOLAMA OLAYI DUYURUSU");
}
window.addEventListener('storage', onStorageEvent, false);
onStorageEvent() : olay kontrol fonksiyonudur.
. addEventListener() : depolama olayını bir olay kontrol fonksiyonuna bağlar.
storageEvent : bir parametre olarak geçirilecek nesnedir.
StorageEvent {
id;
ad;
}
Oturum boyunca depolama (Session Storage)
localStorage nesnesine ek olarak, yerelde veri depolamayı, sessionStorage nesnesini kullanarak da gerçekleştirebilirsiniz. Sistem performansını düşürmeden, sessionStorage nesnesiyle çok büyük miktarda veri depolamak mümkündür. sessionStorage nesnesiyle bilgi depolanması ya da saklanması sadece bir oturum için gerçekleşir; tarayıcı kapatılınca veriler silinir.
sessionStorage nesnesini kullanmak için yapmanız gereken tek şey, JavaScript'te sessionStorage nesnesini değiştirmektir (ekleme, düzenleme, silme işlemleri). Bunu gerçekleştirmek için aşağıdaki fonksiyonları kullanabilirsiniz:
- setItem(key,value): Veritabanında anahtar/değer çiftini saklamak için kullanılır.
sessionStorage.setItem("234", "ali"); //234 anahtar, ali ise değerdir.
- getItem(key): Anahtar değeri verilen değere erişir.
sessionStorage.getItem('234'); // 234 anahtardır
- removeItem(key): Anahtar değeri verilen veriyi veritabanından siler.
sessionStorage.removeItem("234"); // 234 anahtardır.
- clear(): Bütün anahtar/değer çiftlerini localStorage nesnesinden siler.
sessionStorage.clear();
<!DOCTYPE html>
<html>
<head>
<script>
function SAYAC_TIKLA() {
if(typeof(Storage) !== "TANIMSIZ") {
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("SONUC").innerHTML = "BU OTURUMDA DUGMEYE ... " + sessionStorage.clickcount + " KEZ BASTINIZ.";
} else {
document.getElementById("SONUC").innerHTML = "TARAYICINIZ BU NESNEYI DESTEKLEMIYOR";
}
}
</script>
</head>
<body>
<p><button onclick="SAYAC_TIKLA()" type="button">TIKLAYINIZ</button></p>
<div id="SONUC"></div>
<p>SAYACI ARTIRMAK ICIN TIKLAYINIZ</p>
<p>TARAYICI VEYA PENCEREYI KAPATARAK YENIDEN DENEYINIZ</p>
</body>
</html>
Session Storage'da depolanmış verileri elde etmek
Session Storage bölümünde sakladığınız verileri elde etmek için yapmanız gereken şey, sessionStorage.key(i) fonksiyonunu kullanarak bir döngü oluşturmaktır:
function tumVeriListe(){
for (i=0; i<=localStorage.length-1; i++)
{
anahtar= sessionStorage.key(i);
deger= sessionStorage.getItem(anahtar);
}
}