JavaScript'te Local Storage Kullanarak Offline Veri Depolama

Adı : JavaScript'te Local Storage Kullanarak Offline Veri Depolama

Günümüz teknolojisinde web uygulamaları, kullanıcıların internet bağlantısı olmadan da çalışabilmesi gerekmektedir. Bu noktada local storage kullanarak offline veri depolama oldukça kullanışlı bir çözüm sunmaktadır. Local storage, HTML5’in bir parçası olarak kullanılan bir API’dir ve web uygulamasının bir parçası olarak veri depolamasına izin verir. Bu depolama, tarayıcının bellek alanını kullanarak yapılır ve kullanıcının verilerini tarayıcıda saklar, böylece internet bağlantısı olmadığında da kullanılabilir.

Local storage, client-side’da çalışır ve sunucu tarafında saklama alanına ihtiyaç duymaz. Bu nedenle, verilerin saklanması ve alınması hızlı ve pratik bir şekilde gerçekleştirilebilir. Local storage kullanarak verileri depolamak, bu verilerin güvenliğini de sağlar.

JavaScript’te Local Storage Kullanımı

Local storage kullanmak oldukça kolaydır. Verileri saklamak için localStorage.setItem() fonksiyonu kullanılır. Bu fonksiyonda, ilk parametre verinin belirleyicisidir, ikinci parametre ise veriyi temsil eden string’dir. Örneğin, aşağıdaki kod örneği bir “username” verisi saklar:

```
localStorage.setItem(\"username\", \"john.doe\");
```

Bu veriyi daha sonra almak istediğimizde, localStorage.getItem() fonksiyonu kullanılır. Aşağıdaki kod örneği, local storage’dan “username” verisini alır:

```
localStorage.getItem(\"username\"); // john.doe
```

Local storage’dan bir veri silmek için, localStorage.removeItem() fonksiyonu kullanılır. Aşağıdaki örnek kodda “username” verisi silinir:

```
localStorage.removeItem(\"username\");
```

Local Storage Kullanarak Offline Veri Depolama Örnekleri

1. Yalnızca JavaScript Kullanarak

Aşağıdaki örnek, kullanıcının adını ve soyadını local storage’a kaydeder. Kullanıcı, daha sonra bu verileri alabilir ve ekrana yazdırabilir:

```
// Ad ve soyadı localStorage'a kaydet
localStorage.setItem(\"firstName\", \"John\");
localStorage.setItem(\"lastName\", \"Doe\");

// Ad ve soyadı alın ve yazdır
var firstName = localStorage.getItem(\"firstName\");
var lastName = localStorage.getItem(\"lastName\");

console.log(firstName + \" \" + lastName);

// \"John Doe\" olarak görüntülenir
```

2. Web Uygulamasında Uygulama Ayarları

Web uygulamalarında, kullanıcıların belirli ayarlar yapması gerekebilir. Bu ayarlar, tarayıcının cookie’lerini kullanarak yapılabilir, ancak bu yöntem oldukça kısıtlıdır. Local storage kullanarak, web uygulamasındaki ayarların tümü kullanıcı tarafından yapılabilecek şekilde saklanabilir. Aşağıdaki örnek, kullanıcının site temasını kaydeden bir uygulama ayarları örneğidir:

```
// Tema seçeneğini localStorage'a kaydet
var selectedTheme = \"dark\";
localStorage.setItem(\"selectedTheme\", selectedTheme);

// Seçilen tema seçeneğini kullanarak sayfa CSS ayarlarını güncelle
if (selectedTheme === \"dark\") {
document.body.style.backgroundColor = \"#263238\";
document.body.style.color = \"#FFFFFF\";
} else {
document.body.style.backgroundColor = \"#FFFFFF\";
document.body.style.color = \"#000000\";
}
```

3. Online Form Verileri

Web uygulamalarında, kullanıcıların bir formu doldurarak veri girmesi gerekebilir. Bu veriler, sunucuya gönderilmeden önce local storage’a kaydedilebilir. Bu şekilde, kullanıcının bağlantısı kesilirse veya formdan ayrılırsa, veriler kaydedilir ve kaybolmaz. Aşağıdaki örnek, kullanıcı adı, e-posta ve mesaj girilen bir iletişim formundan alınan verileri saklar:

```
// Forma girilen verileri localStorage'a kaydet
var name = document.getElementById(\"name\").value;
var email = document.getElementById(\"email\").value;
var message = document.getElementById(\"message\").value;

localStorage.setItem(\"name\", name);
localStorage.setItem(\"email\", email);
localStorage.setItem(\"message\", message);

// Form alanlarını temizle
document.getElementById(\"name\").value = \"\";
document.getElementById(\"email\").value = \"\";
document.getElementById(\"message\").value = \"\";
```

Sık Sorulan Sorular

1. Local storage, kullanıcı verilerini nasıl saklar?

Local storage, tarayıcının yerel bellek alanında saklama alanı oluşturur. Kullanıcı verileri, bu bellek alanında saklanır ve bu nedenle, tarayıcı kapatılsa bile veriler kalır.

2. Local storage, ne kadar veri saklayabilir?

Local storage, genellikle 5-10 MB arasında veri saklayabilir, ancak bu miktar farklı tarayıcılar arasında değişebilir.

3. Local storage kullanmak, ne kadar güvenli?

Local storage, kullanıcının tarayıcısında saklanır ve bu nedenle, güvenliğinin sağlanması kullanıcının sorumluluğundadır. Ancak verilerin şifrelenmesi, saldırılara karşı ek koruma sağlayabilir.

4. Local storage, hangi tarayıcılarda kullanılabilir?

Local storage, çoğu modern tarayıcıda kullanılabilen bir özelliktir. Internet Explorer 8 veya daha eski tarayıcılarda desteklenmez.

5. Local storage, kullanıcının internet bağlantısı yokken nasıl çalışır?

Local storage, tarayıcının yerel bellek alanında saklanır, bu nedenle internet bağlantısı yokken de kullanılabilir."