React'te localStorage'a depolama

Giriş

Hafif uygulamalar geliştirirken – bazı verileri depolamak isteyebiliriz. Bir veritabanı aşırıya kaçıyorsa – harika bir alternatif var: localStorage!

Veritabanı amaçları için bir veritabanının yerini almasa da, kolayca erişilebilen veri noktalarını depolamak için kullanabileceğiniz basit bir dosya tabanlı depolama sistemi olarak hizmet eder.

Bu yazımızda nasıl kullanılacağını öğreneceğiz. localStorage verileri tarayıcımızda kolayca saklamak için. Bu veriler şu şekilde kaydedilir: anahtar / değer çiftleri kullanıcının kolayca geri alabileceği.

Verileri kaydetme localStorage React'te çok kolaydır:

const [data, setData] = useState([]);

useEffect(() => {
  localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);

Aceleniz yoksa ve bunun nasıl çalıştığı hakkında daha fazla bilgi edinmek istiyorsanız okumaya devam edin!

Nedir yerel depolama?

localStorage geliştiricilerin depolamasını sağlayan bir web depolama nesnesidir. anahtar / değer çiftleri ve bu verilerin, bir kullanıcı bir tarayıcıyı kapattığında veya yeniden başlattığında bile tüm sayfa yenilemelerinde hayatta kalmasını sağlar ve son kullanma tarihi yoktur. Depolanan anahtar/değer çiftleri, diziler, nesneler, dizeler, sayılar ve diğerleri gibi her tür veriyi içerebilir.

Ancak bu, web sitelerinizdeki ve web uygulamalarınızdaki veritabanlarının rolünün yerini alamaz çünkü bir kullanıcı tarayıcının önbelleğini ve yerel depolamayı temizlediğinde veriler kaybolur – sonuçta, yerel depolama ve bu şekilde kullanılmalıdır. Bununla birlikte, bir kullanıcının kullanabileceği durumlar vardır. localStorageuygulanması gibi, karanlık mod özelliği, bir kullanıcının form giriş değerini kalıcı hale getirme ve diğerleri.

localStorage tarayıcının depolama nesnesine erişmemize izin veren yerleşik yöntemlere sahiptir. Bir örnek setItem() bir anahtar ve bir değer eklememize izin veren yöntem localStorage, bu nedenle veri depolamamızı sağlar. Verileri almak için başka yöntemler kullanılır – getItem(), verileri sil – removeItem(), hepsini temizle localStorage örnekler – clear()Ve benzeri.

Verilerin Depolanması yerel depolama İle setItem() Yöntem

The setItem() yöntemi, herhangi bir veri türünün değerlerini kaydetmemizi sağlar. localStorage tuşlara değerler atayarak, anahtar / değer çifti. Bu anahtar, onu almak istediğimizde karşılık gelen değeri almak için kullanılacaktır. localStorage.

Not: Verileri içinde saklamak için localStorage, önce onu dönüştürmeliyiz JSON dizesi ile JSON.stringify() işlev. Ve onu almak istediğimizde, verileri kullanarak ayrıştıracağız. JSON.parse(), JSON dizesini bir JSON nesnesi.

React'te verilerle çalışırken sıklıkla kullanırız: kancalar saklamamıza/tutmamıza yardımcı olmak için. Kancalar ayrıca bu verileri nereye yükleyeceğimizi bulmamıza da yardımcı olabilir. Bu aynı zamanda için de geçerlidir localStorage çünkü kullanacağız useState() ve useEffect() kancalar. Bu kancalar kritiktir çünkü useState() kanca verileri tutmak ve ayarlamak için kullanılır, oysa useEffect() hook, ilk oluşturmadan sonra ve ikinci parametre değiştikçe durum her geçtiğinde varsayılan olarak tetiklenir.

Temeli açıkladıktan sonra, verileri depolamak için kullanacağımız kod aşağıdadır. localStorage:

const [data, setData] = useState([]);

useEffect(() => {
  localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);

Önce depolamak istediğimiz verileri kendi dosyamızda tutmak için bir durum yarattık. localStorage, ve sonra bir useEffect() kanca, durumu ikinci parametre olarak iletir. Bu şekilde, durum değiştiğinde, içindeki veriler localStorage geçerli değere güncellenir.

Veri depolamada bize yardımcı olmak için kullanılan temel işlevi, useEffect() kanca:

localStorage.setItem('dataKey', JSON.stringify(data));

Sonuç

Bu makalede, kullanarak React'te veri depolamak için React kancalarının nasıl kullanılacağını öğrendik. localStorage. Daha önce belirtildiği gibi, bu hiçbir zaman bir veritabanı rolünün yerini almayacak, bunun yerine kullanıcı arayüzünü iyileştirebilecek, ancak tarayıcıdan bağımsız olarak kalıcı olması amaçlanmayan, kullanıcıyla ilgili bazı verileri depolamamıza yardımcı olacaktır.