JavaScript ile Web Depolama - IndexedDB, Local Stage, Cache API ve Cookie
JavaScript, genellikle web tarayıcılarında kullanılan bir programlama dilidir. İnteraktif web sayfaları oluşturmak için kullanılır. JavaScript, web sayfalarının dinamik ve etkileşimli olmasını sağlar. Kullanıcı etkileşimlerini işleyebilir, web sayfalarını değiştirebilir, içerik ekleyebilir veya kaldırabilir, animasyonlar oluşturabilir ve daha pek çok şey yapabilir. JavaScript aynı zamanda sunucu tarafında (Node.js gibi) da kullanılabilir, böylece sunucu ve istemci tarafındaki kodlama dili olarak tek bir dil kullanılabilir.
JavaScript sayfalarımıza dinamiklik katar. İşte bu dinamizime örnekleri şu şekilde sıralayabiliriz.
-
Form Doğrulama: Bir kullanıcı formu doldururken JavaScript kullanarak girilen verilerin doğruluğunu kontrol edebilirsiniz. Örneğin, bir e-posta adresinin geçerli olup olmadığını kontrol etmek veya bir parolanın belirli bir uzunlukta olup olmadığını kontrol etmek için JavaScript kullanabilirsiniz.
-
Sayfa İçeriği Değiştirme: JavaScript, kullanıcı bir düğmeye tıkladığında veya bir alanı doldurduğunda, sayfa içeriğini değiştirebilir. Örneğin, bir butona tıklandığında bir metin paragrafının rengini değiştirebilir veya bir görüntünün görünürlüğünü değiştirebilirsiniz.
-
Animasyonlar: JavaScript, HTML ve CSS ile birlikte kullanılarak animasyonlar oluşturmak için kullanılabilir. Örneğin, bir elementin yavaşça kaymasını veya belirli bir etkinliğe yanıt olarak bir elementin boyutunu değiştirmesini sağlayabilirsiniz.
-
AJAX İstekleri: JavaScript, Asenkron JavaScript ve XML (AJAX) kullanarak sayfa yeniden yüklemeden sunucu ile iletişim kurabilir. Bu, kullanıcıya daha akıcı ve hızlı bir deneyim sunar. Örneğin, bir kullanıcının bir form gönderdiğinde sayfanın yeniden yüklenmesine gerek kalmadan sunucuya veri gönderebilir ve sonuçları alabilirsiniz.
-
Web Tabanlı Oyunlar: JavaScript, tarayıcı tabanlı oyunlar oluşturmak için sıkça kullanılır. Oyunun olaylarına yanıt vermek ve oyun durumunu güncellemek için JavaScript kullanılır. Örneğin, kullanıcı fareyi hareket ettirdiğinde veya bir düğmeye tıkladığında oyunun durumu değişebilir veya yeni ögeler eklenebilir.
Veri depolama her ne kadar backend işi olsada javascript te de çok etkili ve işimizi kolaylaştıran yöntemler bulunmaktadır.
JavaScript'te Veri Depolama Yöntemleri:
-
IndexedDB: IndexedDB, tarayıcıda yapılandırılmış verileri saklamak için bir JavaScript API'sidir. Bu, büyük miktarlarda veri saklamak ve karmaşık sorgular yapmak için kullanılır. IndexedDB, modern tarayıcılar tarafından desteklenir ve genellikle çevrimdışı web uygulamaları veya büyük veri miktarlarını işleyen uygulamalar için tercih edilir.
-
Web Storage (Web Depolama): Web Storage API'si, tarayıcıda daha büyük miktarda veri saklamak için kullanılabilir. İki tür web depolama vardır:
- Local Storage: Tarayıcıda kalıcı olarak saklanan verilerdir. Tarayıcı kapandığında bile veriler korunur ve sadece kullanıcı tarafından silindiğinde silinirler.
- Session Storage: Tarayıcı penceresi açık olduğu sürece verileri saklar. Pencere kapatıldığında veriler otomatik olarak silinir.
-
Cache API: Tarayıcı önbelleğinde verileri saklamak için kullanılır. Bu, web sayfalarının daha hızlı yüklenmesini sağlar. Web sayfaları, belirli kaynakları (örneğin, CSS dosyaları, resimler) ziyaretçinin tarayıcısında önbelleğe alabilir ve bu kaynakları daha sonra tekrar kullanabilir.
-
Cookies (Çerezler): JavaScript ile tarayıcı çerezlerine erişilebilir. Bu çerezler küçük metin parçalarıdır ve tarayıcıda saklanır. Genellikle kullanıcı tercihleri, oturum kimlik bilgileri gibi küçük verileri saklamak için kullanılırlar. Ancak çerezlerin saklayabileceği veri miktarı sınırlıdır ve güvenlik açısından bazı sınırlamalara tabidir.
Bu yöntemler, JavaScript ile tarayıcıda veri depolamanın yaygın yollarını temsil eder. Hangi yöntemin kullanılacağı, depolanacak verinin türüne, boyutuna ve kullanım senaryosuna bağlı olacaktır.
1) IndexedDB
IndexedDB, tarayıcıda büyük miktarlarda yapılandırılmış veri saklamak için kullanılan bir API'dir. IndexedDB, JSON verilerini depolamak için ilişkisel olmayan bir veritabanı olarak düşünülebilir. Veri, anahtar-değer çiftleri şeklinde depolanır ve JavaScript nesnelerini saklamak için uygun bir yerdir. IndexedDB veritabanının boyutuna ilişkin tek sınır, kullanıcının disk alanı ve işletim sistemi olanaklarıdır.
IndexedDB'nin temel özellikleri şunlardır:
-
Yapılandırılmış Depolama: IndexedDB, bir veritabanında birden çok nesneyi saklamak ve bunları sorgulamak için bir arayüz sağlar.
-
Transaksiyon Tabanlı: Veri işlemleri transaksiyonlar halinde gerçekleşir, bu da güvenli ve tutarlı bir veri erişimi sağlar.
-
Event-based (Olay Tabanlı): IndexedDB, işlemlerin başarılı bir şekilde tamamlanmasını veya başarısız olmasını takip etmek için olay tabanlı bir model kullanır.
IndexedDB kullanarak veri ekleme, silme ve okuma işlemlerini gerçekleştiren basit bir örnek:
// IndexedDB'ye bağlanma
var request = indexedDB.open('my-database', 1);
request.onerror = function(event) {
console.error('Veritabanı açılırken hata oluştu:', event.target.errorCode);
};
request.onsuccess = function(event) {
console.log('Veritabanı başarıyla açıldı');
var db = event.target.result;
// Veri ekleme
var transaction = db.transaction(['store'], 'readwrite');
var objectStore = transaction.objectStore('store');
objectStore.add({ id: 1, name: 'John Doe', age: 30 });
// Veri okuma
var getRequest = objectStore.get(1);
getRequest.onsuccess = function(event) {
var result = event.target.result;
console.log('Okunan veri:', result);
};
// Veri silme
var deleteRequest = objectStore.delete(1);
deleteRequest.onsuccess = function(event) {
console.log('Veri başarıyla silindi');
};
transaction.oncomplete = function(event) {
console.log('İşlem tamamlandı');
db.close(); // Veritabanı bağlantısını kapat
};
};
// Veritabanı versiyonunu yükseltme
request.onupgradeneeded = function(event) {
var db = event.target.result;
var objectStore = db.createObjectStore('store', { keyPath: 'id' });
console.log('Veritabanı oluşturuldu ve güncellendi');
};
2) Web Storage (Web Depolama)
Web Storage, tarayıcıda veri depolamak için kullanılan bir mekanizmadır. Web Storage API, tarayıcıda verileri tutmak için iki ana depolama mekanizması sunar: Session Storage ve Local Storage.
-
Session Storage: Session Storage, tarayıcı penceresi ya da sekmesi kapandığında otomatik olarak silinen verileri saklar. Yani, bir kullanıcı tarayıcı penceresini kapattığında ya da sekmesini yenilediğinde, Session Storage'da saklanan veriler silinir.
-
Local Storage: Local Storage, tarayıcı penceresi ya da sekmesi kapandığında bile verilerin kalmasını sağlar. Yani, Local Storage'da saklanan veriler kullanıcı tarafından silinmediği sürece kalıcıdır. Local Storage limiti 5-10 MB dır
// Veri ekleme
function setItem(key, value) {
localStorage.setItem(key, JSON.stringify(value)); // JSON.stringify() kullanarak nesneyi bir JSON string'e dönüştürürüz
}
// Veri okuma
function getItem(key) {
var item = localStorage.getItem(key);
return item ? JSON.parse(item) : null; // JSON.parse() kullanarak JSON string'i bir nesneye dönüştürürüz
}
// Veri silme
function removeItem(key) {
localStorage.removeItem(key);
}
// Örnek kullanım
setItem('username', 'John'); // Local Storage'a bir kullanıcı adı ekler
console.log(getItem('username')); // "John" çıktısı alır
removeItem('username'); // "username" anahtarına sahip veriyi siler
console.log(getItem('username')); // null çıktısı alır
3) Cache API
JavaScript Cache API, tarayıcıda veri önbelleği oluşturmak ve yönetmek için kullanılan bir API'dir. Bu API, web uygulamalarının daha hızlı yanıt vermesini sağlamak için statik dosyaları (örneğin, CSS, JavaScript, resimler) veya dinamik içeriği (örneğin, API yanıtları) önbelleğe almak için kullanılır.
Cache API, Promise tabanlı bir API'dir ve modern tarayıcılarda desteklenmektedir. Genellikle Service Worker gibi diğer web standartlarıyla birlikte kullanılır.
// Önbelleğe alma ve kullanma
caches.open('my-cache').then(function(cache) {
return cache.match('https://example.com/data.json').then(function(response) {
if (response) {
// Veri önbellekte bulundu, bu yüzden önbellekten al
return response.json();
}
// Veri önbellekte bulunamadı, bu yüzden ağdan al
return fetch('https://example.com/data.json').then(function(networkResponse) {
cache.put('https://example.com/data.json', networkResponse.clone()); // Veriyi önbelleğe ekle
return networkResponse.json();
});
});
}).then(function(data) {
// Veri kullanılabilir, burada işleyin
console.log(data);
}).catch(function(error) {
// Hata durumunda işleyin
console.error('Hata:', error);
});
4) Cookies (Çerezler)
Çerezler, web tarayıcıları tarafından kullanıcının bilgisayarında depolanan küçük metin dosyalarıdır. Bu dosyalar, web sitelerinin kullanıcı hakkında bilgi saklaması için kullanılır. Çerezler, tarayıcıdan sunucuya gönderilen istekler aracılığıyla web sunucusuna aktarılır. Web sunucusu bu çerezleri okuyabilir ve kullanıcıya özgü içerik sunabilir.
Çerezlerin Kullanım Alanları:
-
Oturum Yönetimi: Çerezler sıklıkla oturum yönetimi için kullanılır. Kullanıcı bir web sitesine giriş yaptığında, sunucu genellikle kullanıcıyı oturum açtığına dair bir çerez oluşturur. Bu çerez, kullanıcının oturum bilgilerini saklar ve kullanıcının oturum açıkken sayfalar arasında gezinmesine izin verir.
-
Kullanıcı Tercihleri: Web siteleri, kullanıcı tercihlerini hatırlamak için çerezler kullanabilir. Örneğin, bir kullanıcının site dilini veya tema tercihini saklamak için çerezler kullanılabilir.
-
Alışveriş Sepeti: Çevrimiçi alışveriş yapan kullanıcıların alışveriş sepeti bilgileri çerezler aracılığıyla saklanabilir. Bu sayede kullanıcılar alışverişe kaldıkları yerden devam edebilirler.
-
Kullanıcı İzleme ve Analiz: Çerezler, kullanıcıların web sitesinde nasıl etkileşimde bulunduğunu izlemek ve analiz etmek için kullanılabilir. Bu bilgiler, web sitesinin performansını değerlendirmek ve kullanıcı deneyimini iyileştirmek için kullanılabilir.
// Çerez ekleme
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
// Çerez okuma
function getCookie(name) {
var nameEQ = name + "=";
var cookies = document.cookie.split(';');
for(var i = 0; i < cookies.length; i++) {
var cookie = cookies[i];
while (cookie.charAt(0) == ' ') {
cookie = cookie.substring(1, cookie.length);
}
if (cookie.indexOf(nameEQ) == 0) {
return cookie.substring(nameEQ.length, cookie.length);
}
}
return null;
}
// Çerez silme
function eraseCookie(name) {
document.cookie = name+'=; Max-Age=-99999999;';
}
// Örnek kullanım
setCookie('username', 'John', 30); // 30 gün boyunca bir kullanıcı adı çerezi oluşturur
console.log(getCookie('username')); // "John" çıktısı alır
eraseCookie('username'); // "username" çerezi silinir
console.log(getCookie('username')); // null çıktısı alır
- Web Yazılım
- Javascript
Tepkini Göster
- 2
- 0
- 0
- 0
- 0
- 0
- 0
- 0
- 0
- 0
- 0
- 0
- 0
- 0
- 0
- 0
Yorumlar
Sende Yorumunu Ekle