İlginizi Çekebilir
  1. Ana Sayfa
  2. Nasıl Yapılır?

LocalStorage Kullanımı ve Özellikleri

LocalStorage Kullanımı ve Özellikleri
+ - 0

 

localStorage nedir?

LocalStorage kullanıcı tarayıcısında(Chrome, Opera, Firefox vb.) anahtar/değer çiftlerini kaydetmemize izin veren salt okunur bir JavaScript özelliğidir. localStorage salt okunurdur çünkü değişmezdir/üzerine yazılamaz ve başka bir değere atamak mümkün değildir, ancak verileri depolamak için kullanabiliriz. Bu size kafa karıştırıcı geliyorsa endişelenmeyin ve okumaya devam edin; verileri tarayıcıya kolayca depolamak ve almak için localStorage’ı nasıl kullanacağınızı göreceksiniz.

localStorage vs sessionStorage

localStorage ve sessionStorage arasındaki fark, son kullanma tarihidir.

Local Storage: JavaScript sitelerinin ve uygulamalarının son kullanma tarihi olmadan, bir web tarayıcısında key/value değerlerinin kaydedebilmesine izin veren bir özelliktir.

Session Storage: Bir web tarayıcısında key/value değerlerini yalnızca bir oturum süresi için tarayıcıya kaydedebilmesine izin veren bir özelliktir. Yani tarayıcı sekmesi kapatıldığında veriler de kaybolur.

localStorage’a Kullanımı

ablfvvkryso7fyragbgsLocalStorage üzerindeki veriler, anahtar/değer çiftleri olarak depolanır ve her zaman String olmalıdır. Küçük bir geçici çözümle JSON nesnelerini depolamak ve almak da mümkündür. localStorage üzerine yazmaktan sorumlu olan fonksiyonumuz setItem ‘dır.

Örnek :

// Kullanıcı erişim belirtecini kaydetme<br>
localStorage.setItem('token', 'ksjakdkaugdka2i163mjbdja8y1');

Konsolu (f12) açıp Local Storage altındaki uygulama sekmesini kontrol ederek bilgilerin kaydedildiğini kontrol edebiliriz:

Nesneleri saklamak

Bu durumda, bir kullanıcının kişisel erişim belirtecini kaydediyorum, ancak ya kullanıcının ayrıntılarıyla birlikte bir nesneyi saklamam gerekiyorsa? Hadi deneyelim:

// 1. Bir Obje tanımlıyoruz
const user = {name: 'John', surname: 'Connor', id: 2};
// 2. Objemizi parametre olarak ekliyoruz
localStorage.setItem('user', user);

Ve şimdi uygulama sekmesini kontrol edelim;

Eh, ‘bir şey’ depoladı, ancak içeriğe erişilemiyor, Peki nesneleri localStorage‘da nasıl saklayabiliriz?

localStorage yalnızca dizelerle çalışsa da, nesneyi bir Dize‘ye dönüştürerek çalışmasını sağlayabiliriz:

// 1. Bir obje oluşturuyoruz.
const user = {name: 'John', surname: 'Connor', id: 2};
// 2. Objemizi String'e dönüştürüyoruz.
const userString = JSON.stringify(user);
// 3. Objemizi parametre olarak gönderiyoruz
localStorage.setItem('user', userString);

Uygulama sekmesinde kontrol edebiliriz. Bilgi orada ve daha da önemlisi erişilebilir.

localStorage verileri nasıl okunur?

veri okuma

localStorage verilerini okumak için getItem fonksiyonunu kullanıyoruz ve verileri tutan anahtarı bilmemiz gerekiyor:

Örnek :

// localStorage'dan kullanıcı erişim belirtecini okuma
const token = localStorage.getItem('token');
console.log(token);

Nesneleri okumak

Şimdi aynı getItem fonksiyonu kullanarak daha önce kaydettiğimiz nesneyi geri getirelim .

// 1. Bir Obje tanımlıyoruz
const user = {name: 'John', surname: 'Connor', id: 2};
// 2. Objemizi parametre olarak ekliyoruz
localStorage.setItem('user', user);

localStorage’ı okuyoruz ve konsoldaki nesnenin adı ve soyadı özelliklerini kullanarak bir karşılama mesajı kaydetmeye çalışıyoruz.

Konsol, ad ve soyadı tanımsız olarak dönüyor. Niye ya? çünkü depoladığımız bir nesne değil, bir String. localStorage’dan nesneleri okumak için String’den Object’e dönüştürmemiz gerekiyor.

// 1. Objeyi string olarak okumak
let user = localStorage.getItem("user");
// 2. Parsing işlemi yapıyoruz
user = JSON.parse(user)
// 3. Artık nesne özelliklerine erişebiliriz.
console.log(`Welcome ${user.name} ${user.surname}`);

Tüm localStorage anahtarları nasıl bulunur?

Aşağıdakileri kullanarak tüm anahtarları içeren bir dizi alabiliriz Object.keys

const keys = Object.keys(localStorage);
console.log(keys);

Veriler nasıl kaldırılır

LocalStorage’dan veri kaldırmak için 2 seçeneğimiz var:

1 – Bir öğeyi sil

Silme işlemi için removeItem fonksiyonunu kullanabiliriz.

dd
localStorage.removeItem("token");

Belirtecin artık localStorage’da olmadığını görebiliriz:

2 – Tüm öğeleri sil

Mevcut tüm öğeleri silmek için clear fonksiyonunu kullanabiliriz :

clear

localStorage’ın dezavantajları

localStorage.removeItem("token");

localStorage gösterdiğim gibi, kullanımı çok kolay olduğu için yanlış kullanımlar olabilir.

  • Etki alanı yalnızca 5 MB olduğu için üzerinde çok fazla veri saklamayın.
  • Tüm verilere, kullanıcı ve sayfada çalışan herhangi bir komut dosyası kolayca erişilebilir ve  bu nedenle hassas bilgileri saklamayın.
  • Bir veritabanı yerine kullanmayın
Javascript programming language
Önerilen Yazı
JavaScript Objects Kullanımı

Yazar Hakkında

Bu Yazıyı Yorumla