Local Storage Kullanımı

Local storage web storage için kullanabileceğimiz iki yapıdan birisi. Verilerin browser’da key-value şeklinde depo edilmesi için tasarlandı.

Session storage’ın tersine local storage, browser kapatıldığında bile verileri barındırır. Local storage bir Storage nesnesidir ve şu metotları sağlar;

• setItem(key: string, value: string)
• getItem(key: string)
• removeItem(key: string)
• clear()

Şimdi bu metodların kullanımını yakın zamanda geliştirmeye başladığım bir uygulamadan alıntılar yapacağım kodlar üzerinden açıklamaya çalışayım.

Bahsettiğim uygulama GitHub API kullanarak kullanıcıların profillerinin belirli kısmını ve repolarını listeleme üzerine. Local storage kullanılma amacı ise daha önce zaten arama yapılmış bir kullanıcının profiline tekrar erişilmek istendiğinde saatte 5,000 istek hakkımız olan GitHub API’ına başka istek atmamak bunun yerine verilerini local storage’dan çekmek. Bunu yapmak belki bir GitHub profili gibi değişken veriler barındıran kısımlarda doğru olmayacaktır. Mesela kullanıcı ilerleyen zamanlarda repolarına yenisini ekleyebilir ya da bir kaç tanesini silebilir. Böyle olunca bizim uygulamamızda sorunlar gözlenebilir. Local storage’a verilerin tek seferlik yazılması değil de zaman zaman güncellenmeleri daha doğru olacaktır. Benim uyguladığım yöntem tek seferlik olacak. Siz isterseniz kendinize göre şekillendirebilirsiniz.

---

Nasıl Kullanırım?

GitHub API’dan edindiğim, bir kullanıcının repoları verisini local storage’da depolamak istiyorum.

Kod parçası 1 (İlk key-value pairini oluşturma)

export const createRepositoriesCache = () => {
  if (!localStorage.getItem("repositories")){
    localStorage.setItem(
      "repositories",
      JSON.stringify([])
    );
  }
};

Daha uygulamanın başında repositories-item key-value yapısını oluşturuyorum. Daha önce oluşturulmamış key-value yapılarına setItem() metoduyla veri girilemez. Bunu bir kere yapması adına ilk başta localStorage.getItem(“repositories”) kullanarak localStorage’da repositories key’i olan bir satır var mı diye kontrol ediyorum. localStorage.setItem() metoduna ilk parametre olarak “repositories”, ikinci parametre olarak boş bir array veriyorum. Burada belki de can alıcı nokta array’i JSON.stringify kullanarak string bir ifadeye dönüştürmek. Çünkü localStorage objesinde sadece stringleri depolayabiliriz.

Local storage’da yaptığımız değişiklikleri gözlemleyebilmek için local storage’ı browser’ın inspector kısmındaki Application sekmesinde sol tarafta bulunan Storage altında bulabiliriz.

Kod parçası 1'deki fonksiyonu (createRepositoriesCache) çalıştırdığımızda browserın local storage alanı şöyle görünecektir:

Kod parçası 2 (Local storage’da string olarak depolanan array üzerinde array metodlarını kullanmak)

export const repositoryAlreadyInCache = (username) => {
  const repositoriesArray = JSON.parse(localStorage.getItem("repositories"));
  const cachedDataWithUsername = repositoriesArray.find(
    (repository) => repository.username === username
  );
if (cachedDataWithUsername) {
    return true;
  }
  return false;
};

Daha önce local storage’da string veri türünden farklı bir veri türü depolayamadığımızdan bahsettik. Bu sebeple depolamak istediğimiz arrayleri JSON.stringify(…) kullanarak daha sonra bu array üzerinde işlem yapabilmek üzere depolamıştık. Şimdi bu depoladığımız arrayi, üzerinde array metodlarını kullanabileceğimiz üzere local storage’dan çekelim. JSON.parse(…) tam da bu işe yarıyor. localStorage.getItem(“repositories”) ile string olarak depolanmış array’i çektik ve şimdi JSON.parse(localStorage.getItem(“repositories”)) ile array olarak kullanabileceğiz. Dikkat ederseniz cachedDataWithUsername değişkenine, localStorage’dan elde ettiğimiz array üzerinde .find() metoduyla arama yaparak bir değer atıyoruz.

Kod parçası 3(Local storage’da depolanan arraye eleman ekleme)

export const addRepositoriesToCacheByUsername = (
  username,
  repositoriesFromRequest
) => {
  if (!repositoryAlreadyInCache(username)) {
    let repositoriesArray = JSON.parse(localStorage.getItem("repositories"));
localStorage.setItem(
      "repositories",
      JSON.stringify([
        ...repositoriesArray,
        { username: username, repositories: repositoriesFromRequest },
      ])
    );
  }
};

Aslında şimdiye kadar öğrendiklerimiz ve biraz javascript bilgisiyle local storage’da depolanan arraye eleman eklemenin nasıl gerçekleştiğini anlamak mümkün. Ne yaptık;

1. Local storage’da depolamak istediğimiz bir array var.
2. Arrayi JSON.stringify ile stringe çevirdik
3. local storage’da string olarak tutulan arrayi JSON.parse ile array nesnesine dönüştürdük.
4. Hmm… Bir de array metotlarından .push() falan vardı dimi? Bi de neydi o hep ismini karıştırıyorum. Heh spread operator!

Daha önce de yaptığımız gibi local storage’dan elde ettiğimiz arrayi repositoriesArray değişkenine atadık. Ve yine daha önce yaptığımız gibi local storage’a bir key-value pairi ekledik. Ancak bu sefer value, farkettiyseniz daha önceki haline bir eleman eklenmiş hali.(spread operator 😶‍🌫️).

Tüm bu işlemleri yaparken browserın local storage kısmı şöyle görünüyor:

Yukarıdaki fonksiyonların birbirleriyle kullanmanız halinde, bir API’a istek gönderilen kısımda basit bir koşul belirterek, verinin local storage’da depolanandan mı yoksa API’dan mı geleceğini yönetebilirsiniz.

---

En başta bahsettiğim removeItem() ve clear() metodlarını uygulamamın şu aşamasında kullanmadım. Kısaca bahsedeyim:

removeItem(): localStorage.removeItem(“repositories”) metodu çalıştığında local storage’da key-value pairlerinden key’i ‘repositories’ olan silinecektir.

clear(): localStorage.clear() metodu argüman almaz ve tahmin edebileceğiniz üzere bütün key-value pairlerini silecektir.

---

Kod parçalarına yer verdiğim uygulamam GitHub’da ancak henüz private repository 🙃. Public olduğu zaman kaynak kodu buraya iliştireceğim.

Bir dahaki yazıda görüşmek üzere. Hoşçakalın!🤗