React'te localStorage Okuma ve Yazma

localStorage, dört temel yönteme sahip yerleşik bir tarayıcı depolamasıdır: setItem(key, value), getItem(key), removeItem(key) ve clear(). Veriler sayfa yeniden yüklense veya tarayıcı yeniden başlatılsa bile korunur.

window nesnesinde bulunur ve kaynağa göre kapsamlanır; yani her alan adının kendine ait yalıtılmış bir depolaması vardır.

Her localStorage çağrısı ana iş parçacığında eşzamanlı olarak çalışır. Büyük miktarda veri okumak veya yazmak çizimi engelleyebilir ve kullanıcı arayüzünün takılıyormuş gibi hissettirmesine yol açabilir.

Bu nedenle saklanan değerleri küçük tutun ve her tuş vuruşunda veya kaydırma olayında yazmaktan kaçının.

localStorage yalnızca dizeleri saklayabilir. Bir nesneyi veya diziyi saklamak için setItem çağrısından önce JSON.stringify(value) ile serileştirmeniz gerekir.

Dize olmayan bir değeri doğrudan saklarsanız değer dönüştürülür; bu nedenle bir nesne, işe yaramaz [object Object] dizesine dönüşür.

Veri okurken JSON.parse(localStorage.getItem(key)) çağrısını yaparsınız; ancak saklanan dize bozuksa veya başka bir kaynak tarafından yazıldıysa ayrıştırma hata fırlatabilir.

Ayrıştırmayı bir try/catch içine alın ve bozuk bir girdinin bileşeninizi çökertmemesi için varsayılan bir değere geri dönün.

localStorage her zaman kullanılabilir değildir: sunucu tarafında işleme sırasında window mevcut değildir ve bazı özel gezinme modları yazma sırasında hata fırlatabilir. Erişimi bir özellik denetimiyle koruyun.

Güvenli bir denetim, sahte bir anahtarı ayarlayıp kaldıran bir try/catch işlemidir; işlem hata fırlatırsa yanlış döndürür.

Çoğu tarayıcı, her kaynak için localStorage kapasitesini yaklaşık beş megabaytla sınırlar. Bu sınırın aşılması, yazma sırasında bir QuotaExceededError hatası oluşturur.

Bu nedenle localStorage küçük veriler için uygundur; ancak görseller, büyük veri kümeleri veya önbelleğe alınmış API yanıtları için kötü bir seçimdir.

Uygun adaylar; tema tercihi, kenar çubuğunun daraltılmış durumu, son kullanılan filtreler, kapatılmış bildirimler ve kaydedilmemiş form taslakları gibi küçük ve hassas olmayan arayüz ile kullanıcı durumu parçalarıdır.

Bunlar, yeniden yükleme sonrasında da korunmasını istediğiniz ancak sunucuya gidip gelmeyi gerektirmeyen değerlerdir.

Belirteçler veya parolalar gibi gizli bilgileri depolamaktan kaçının; çünkü sayfadaki herhangi bir betik localStorage'ı okuyabilir ve bu da verileri XSS saldırılarına karşı savunmasız bırakır. Ayrıca büyük nesneleri ve sunucudaki asıl durumu da depolamayın.

Hassas kimlik doğrulama verileri httpOnly çerezlerine, asıl veriler ise sunucuya aittir.

İkisi de aynı uygulama programlama arayüzünü kullanır; ancak sessionStorage, sekme kapandığında temizlenir ve sekmeler arasında paylaşılmaz. localStorage süresiz olarak korunur ve aynı kaynağa ait tüm sekmeler arasında paylaşılır.

Kısa ömürlü, sekmeye özel veriler için sessionStorage'ı; kalıcı tercihler için localStorage'ı seçin.

Çerezler küçüktür ve her HTTP isteğiyle gönderilir; bu kimlik doğrulama için uygundur, ancak genel verilerde bant genişliğini gereksiz yere tüketir. IndexedDB, 5 MB sınırının çok ötesindeki büyük ve yapılandırılmış veriler için eşzamansız bir veritabanıdır.

Sunucunun okuyacağı kimlik doğrulama verileri için çerezleri, küçük istemci tercihleri için localStorage'ı, büyük veya karmaşık veriler için ise IndexedDB'yi seçin.

En küçük yardımcı işlev, localStorage.setItem(key, JSON.stringify(value)) ile yazma yapar ve JSON.parse(localStorage.getItem(key)) çevresindeki korumalı try/catch yapısıyla okur; hata durumunda varsayılan bir değer döndürür.

Bu küçük sarmalayıcı, serileştirme ve hata işlemeyi tek bir yerde tutar.

localStorage veri türleri hakkındaki anlayışınızı sınayın.

localStorage API'sini; eşzamanlı çalıştığını, yalnızca dizeleri tuttuğunu ve yaklaşık 5 MB ile sınırlandığını, ayrıca verileri güvenli biçimde ayrıştırmayı ve SSR ile gizli mod için kullanılabilirliği kontrol etmeyi öğrendiniz.

Ayrıca doğru depolama alanını seçmek için bunu sessionStorage, çerezler ve IndexedDB ile karşılaştırdınız.