JavaScript (ES6) İle Local Storage Yönetimi

Adı : JavaScript (ES6) İle Local Storage Yönetimi

LocalStorage, modern web uygulamalarında kullanılan bir browser depolama teknolojisi olarak karşımıza çıkıyor. Bu teknoloji ekonomik bir şekilde ve kullanıcının verilerini cihaz üzerinde tutarak, kullanıcının uygulamaları offline kullanmasını sağlar.
ES6 ile birlikte LocalStorage yönetimi daha da kolaylaştı. Kullanıcıların verilerini depolamak için key-value yapısını kullanır ve farklı tiplerde veriler barındırabilir.
Bu yazımızda JavaScript (ES6) ile LocalStorage yönetimi hakkında birçok değişik örnekler vererek, bu teknolojinin nasıl çalıştığını adım adım ele alacağız.
LocalStorage Kullanımı
LocalStorage, browser içinde key-value storage olan bir DOM (Document Object Model) bileşenidir. Kullanıcının browser’ında tüm verileri var ve depolama sınırı yaklaşık olarak 5-10MB civarında olabilir.
LocalStorage kullanmak için öncelikle bir anahtar (key) ve bu anahtarın karşılığına gelecek olan veriyi (value) oluşturmanız gerekir. Bir anahtar bir string (dizi) ve value herhangi bir javascript nesnesi olabilir.
Key-value çiftleri eklemek için localStorage.setItem() yöntemi kullanılır. Örneğin;
```javascript
localStorage.setItem(‘myKey’, ‘myValue’);
```
Bu yöntem, myKey id'siyle ve myValue verisiyle bir key-value çifti ekler.
Value'leri okumak için localStorage.getItem() yöntemini kullanabilirsiniz. Örneğin;
```javascript
var myValue = localStorage.getItem(‘myKey’);
```
Bu yöntem bize myKey'in karşılığı olarak myValue verisini verir.
Verileri silmek için localStorage.removeItem() yöntemi kullanılır. Örneğin;
```javascript
localStorage.removeItem(‘myKey’);
```
Bu yöntem ile, myKey ile eşleşen verileri silebilirsiniz.
LocalStorage Örnekleri
Birkaç farklı LocalStorage örneği hakkında konuşalım;
1. Kullanıcının tarayıcısında bir kart oyunu kaydetmek istediğinizi varsayalım. Oyun içinde kullanıcı hangi kartları seçtiğini kaydedebileceği gibi, kullanıcının hali hazırda ne kadar puan kazandığını da kaydedebilirsiniz. Bu kartların ve puanların tarih de dahil olmak üzere daha sonraki seanslarda kullanılması gerekebilir. Bu durumda localStorage.setitem() yöntemi kullanılabilir.
```javascript
localStorage.setItem('cards', JSON.stringify(cards));
localStorage.setItem('score', score.toString());
localStorage.setItem('game-time', new Date().toISOString());
```
Bu kodlar ile, browser'a cards, score ve game-time verileri ekledik.
2. Kullanıcının tarayıcısında bir alışveriş sepetini kaydetmek istediğinizi varsayalım. Sepeti bir matriks içinde kaydetmek yerine, sepet öğelerinin bir dizisi içinde kaydedebilirsiniz. Bunun için localStorage.setItem() yöntemi kullanılabilir.
```javascript
localStorage.setItem('cart', JSON.stringify(cartItems));
```
3. Kullanıcının tarayıcısında bir şerit resim oyunu kaydetmek istediğinizi varsayalım. Kullanıcının tamamladığı en iyi süreyi ve tarihi kaydetmek için localStorage.getItem() yöntemi kullanılabilir.
```javascript
var bestTime = localStorage.getItem('best-time');
var gameDate = localStorage.getItem('game-date');
```
Sık Sorulan Sorular
1. LocalStorage sınırı nedir?
Tarayıcıya bağlı olarak LocalStorage sınırı farklı olabilir, ancak genellikle 5-10MB arasındadır.
2. LocalStorage’a neden ihtiyacımız var?
LocalStorage kullanarak, kullanıcının tarayıcısında varsayılan olarak saklanan verileri kullanarak kullanıcıların uygulamanızı offline olarak kullanmasını sağlayabilirsiniz. Ayrıca, kullanıcının tarayıcısında verileri depolamanıza izin verir.
3. LocalStorage nasıl temizlenir?
Bir key-value çiftini localStorage.removeItem() yöntemi kullanarak silebilirsiniz veya tüm localStorage’u localStorage.clear() yöntemi ile silebilirsiniz.
4. LocalStorage ile SessionStorage arasındaki fark nedir?
LocalStorage, bir web uygulamasında kullanıcının verilerini uzun süre saklamak için kullanılırken, SessionStorage, bir kullanıcının tek bir seansı sırasında verilerini saklamak için kullanılır. SessionStorage, kullanıcının geri dönmesi durumunda kaydedilen verileri korumaz.