HTML5 Web Storage ile Yerel Dosya Depolama

Adı : HTML5 Web Storage ile Yerel Dosya Depolama

HTML5 Web Storage, web uygulamalarında yerel depolama sağlayan bir özelliktir. Bu özellik sayesinde web uygulamaları, kullanıcının verilerini tarayıcıda saklayabilir ve bu verilere her seferinde sunucuyla iletişim kurmadan erişebilir.
Bu yazıda, HTML5 Web Storage özelliği ve yerel dosya depolama hakkında daha detaylı bilgi edineceksiniz. Ayrıca, örnekler ve sık sorulan sorularla konu daha da netleştirilecek.
HTML5 Web Storage Nedir?
HTML5 Web Storage, iki ana web depolama teknolojisi olan Local Storage ve Session Storage'nin bir birleşimidir. Bu teknoloji, web uygulamaları tarafından kullanıcının verilerini tarayıcısında saklamak için kullanılır. Bu sayede, web uygulamaları sunucuyla iletişim kurmadan önce bu verilere erişebilir ve gösterir.
Local Storage, tarayıcıda sınırsız miktarda veri saklama imkanı sağlar ve bu veriler kullanıcı tarafından silinene kadar saklanır. Session Storage ise, daha kısa ömürlü bir depolama çözümüdür ve kullanıcı tarayıcı penceresini kapattığında veriler silinir.
HTML5 Web Storage ile Yerel Dosya Depolama Nasıl Yapılır?
HTML5 Web Storage, JavaScript tarafından kullanılır ve tarayıcı tarafından desteklenir. Bu nedenle, bu özelliği kullanmak için JavaScript kodlarını kullanmanız gerekiyor. Local veya Session Storage kullanmayı tercih ederseniz, aşağıdaki kodları kullanabilirsiniz:
Local Storage Örneği:
```javascript
// Veri saklama
localStorage.setItem(\"ad\", \"Ayşe\");
localStorage.setItem(\"soyad\", \"Yılmaz\");
// Veri alma
var ad = localStorage.getItem(\"ad\");
var soyad = localStorage.getItem(\"soyad\");
```
Session Storage Örneği:
```javascript
// Veri saklama
sessionStorage.setItem(\"ad\", \"Fatma\");
sessionStorage.setItem(\"soyad\", \"Kara\");
// Veri alma
var ad = sessionStorage.getItem(\"ad\");
var soyad = sessionStorage.getItem(\"soyad\");
```
HTML5 Web Storage, yerel dosya depolama işlemi için de kullanılabilir. Bu işlem için File API kullanılır. File API, kullanıcının dosya seçmesine ve yüklemesine izin verir. Böylece, kullanıcıların seçtikleri dosyaları web uygulamasında saklamak mümkün olur.
Aşağıdaki kodları kullanarak, kullanıcının seçtiği dosyayı saklayabilirsiniz:
```javascript
// Dosya seçildiğinde yapılacak işlemler
function handleFileSelect(evt) {
var files = evt.target.files; // Seçilen dosya
var reader = new FileReader();
// Dosya okununcaya kadar işlemler
reader.onload = (function(theFile) {
return function(e) {
// Verileri localStorage'e ekle
localStorage.setItem('dosya', e.target.result);
localStorage.setItem('dosya-ad', escape(theFile.name));
localStorage.setItem('dosya-boyut', theFile.size);
};
})(files[0]);
// Dosyayı oku
reader.readAsDataURL(files[0]);
}
// Dosya seçme kutusuna tıklanınca işlemler
document.getElementById('dosya').addEventListener(\"change\", handleFileSelect, false);
```
Yukarıdaki örnekte, kullanıcı bir dosya seçtiği zaman, dosya okunana kadar bekleniyor. Dosya okunduktan sonra, veriler Local Storage'e ekleniyor ve bu verilere diğer kod bloklarından erişilebilir.
Sık Sorulan Sorular:
1. HTML5 Web Storage, hangi tarayıcılarda desteklenir?
HTML5 Web Storage, tüm modern tarayıcılarda desteklenir. Chrome, Firefox, Safari, Opera ve Internet Explorer 8.0'dan sonraki sürümler destekler.
2. Web uygulamalarının yerel depolama kullanması güvenli mi?
Evet, yerel depolama kullanımı güvenlidir. Ancak, depolanan verilerin güvenliği tamamen uygulama geliştiricisine bağlıdır. Bazı güvenlik önlemleri alınmadığı takdirde, kullanıcı verileri tehlikeye atılabilir.
3. Yerel depolama kullanmak, web uygulamasının hızını artırır mı?
Evet, yerel depolama kullanmak web uygulamasının hızını artırır. Çünkü, verileri sunucudan her seferinde çekmek yerine, tarayıcıda saklanan verileri kullanarak web uygulaması daha hızlı çalışır.
4. Yerel depolama neden önemlidir?
Yerel depolama, web uygulamalarının daha hızlı çalışmasına olanak sağlar ve kullanıcılara daha iyi bir deneyim sunar. Ayrıca, internet bağlantısı olmayan durumlarda bile web uygulamalarının kullanılmasını sağlar.
Bu yazımızda, HTML5 Web Storage ve yerel dosya depolama hakkında bilgi verdik. Bu özellik sayesinde web uygulamaları daha hızlı çalışır ve kullanıcıların verileri tarayıcıda saklanabilir. Ayrıca, örnekler ve sık sorulan sorularla konu daha da netleştirildi.