Научете как да внедрите тази асинхронна и глобална система за съхранение на ключ-стойност за вашето приложение React Native.

AsyncStorage на React Native прави лесно съхраняването и запазването на данни в приложението React Native. С API на AsyncStorage можете да обработвате прости случаи на малки данни във вашето приложение, без да е необходимо локално хранилище на устройството или сложни системи за съхранение.

Какво представлява AsyncStorage на React Native?

AsyncStorage API е постоянна система за съхранение на ключ-стойност. API поддържа набор от Типове данни на JavaScript, включително низови, булеви, числови и JSON обекти.

Данните, съхранени с помощта на AsyncStorage, продължават да съществуват и ще останат достъпни дори ако приложението се затвори или устройството се рестартира. Това прави AsyncStorage идеално решение за съхранение за кеширане на данни и съхраняване на малки количества от състоянието на приложението.

Какъв проблем решава AsyncStorage?

Преди появата на AsyncStorage правилното кеширане на данни беше ненадеждно усилие. Можете или да съхранявате данни в локално хранилище, което не е в състояние да поддържа данни, когато приложението ви се затвори, или можете да съхранявате данните в система за управление на релационна база данни (RDBMS). Но те са твърде сложни, за да работят за този случай на употреба.

instagram viewer

AsyncStorage решава тези проблеми, като предоставя прост, надежден начин за съхраняване на малки и временни данни в приложения на React Native.

За да съхранявате данни с AsyncStorage, данните първо се сериализират в JSON низ. След това JSON низът се съхранява в система ключ-стойност. Когато се опитате да извлечете данни от AsyncStorage, данните се десериализират от JSON и след това ви се връщат в оригиналния си формат.

Това са асинхронни програми които се изпълняват, без да блокират основната JavaScript нишка. Това го прави идеален за съхраняване на данни, които се нуждаят от чест достъп, като потребителски настройки и състояние на приложението.

Методи AsyncStorage

За да инсталирате реагира-нативно-асинхронно съхранение пакет, изпълнете следната команда в терминала на вашия проект:

npm инсталирайте @react-native-async-storage/async-storage

Тъй като AsyncStorage е асинхронен по природа, неговите методи няма да върнат резултати веднага. Вместо това те връщат обещание, което се решава, когато операцията приключи.

Трябва да използвате асинхронен/изчакване синтаксис или подобна техника при извикване на методи на AsyncStorage.

Запишете данни с помощта на методите setItem() и multiSet().

The setItem() и multiSet() се използват методи за задаване на стойностите за даден ключ. Тези методи приемат ключа и стойностите като параметри.

Методът ще върне обещание, което разрешава с булева стойност, показваща дали операцията е била успешна или отхвърля с грешка, ако операцията е неуспешна:

// Запазване на стойност за ключа "потребител"
изчакайте AsyncStorage.setItem("потребител", 'Джон');
// Запазване на множество стойности за ключа "потребител"
изчакайте AsyncStorage.multiSet(["потребител", 'Джон', 'сърна']);

Четете данни с помощта на методите getItem() и multiGet().

С getItem() метод, можете да изтеглите запазени данни от хранилището, като използвате ключа за стойността, която искате да получите. Ако предаденият ключ не съществува, обещанието се отхвърля с грешка:

конст име = изчакайте AsyncStorage.getItem("потребител");

Стойността, върната от getItem() е низ. Ако трябва да съхранявате данни в друг формат, можете да използвате JSON.stringify() за преобразуване на данните в низ, преди да ги съхраните. След това използвайте JSON.parse() за да конвертирате низа обратно в оригиналния тип данни, когато го извличате.

Например:

// Запазете обекта {name: "John Doe", age: 30} за ключа "user"
изчакайте AsyncStorage.setItem("потребител", JSON.stringify({име: "Джон Доу", възраст: 30}));
// Вземете обекта за ключа "потребител"
конст потребител = JSON.parse(изчакайте AsyncStorage.getItem("потребител"));

Можете също да използвате multiGet() метод за извличане на множество двойки ключ-стойност. Методът ще вземе масив от ключове, които трябва да бъдат низове.

Обединяване на данни с помощта на методите mergeItem() и multiMerge().

The mergeItem() и multiMerge() методите обединяват дадената стойност със съществуващата стойност за дадения ключ. Стойността, предадена на mergeItem() може да бъде всякакъв тип данни. Въпреки това е важно да се отбележи, че AsyncStorage не криптира данните, така че всеки с достъп до устройството може да прочете данните:

изчакайте AsyncStorage.mergeItem(име, 'Джейн Доу');

mergeItem() взема ключа за стойността, която искате да обедините, и новата стойност, която искате да обедините със съществуващата стойност на ключа. Използвайте multiMerge() за обединяване на повече от един елемент към ключова стойност.

Изчистване на хранилището с помощта на метода clear().

The ясно() метод ви позволява да премахнете всички елементи, съхранени в AsyncStorage. Може да бъде полезно в различни сценарии, като например когато трябва да нулирате състоянието на приложението по време на излизане на потребител или изчистете кешираните данни на мобилния си телефон.

Например:

конст clearData = асинхронен () => {
опитвам {
изчакайте AsyncStorage.clear();

 } улов (д) {
конзола.грешка (e);
 }
};

Горният код ще изтрие всички двойки ключ-стойност, съхранени в AsyncStorage.

Освен това можете да предоставите функция за обратно извикване на ясно(), който ще бъде извикан, след като операцията приключи:

AsyncStorage.clear()
 .тогава(() => {
// Операцията за изчистване е завършена

 })
 .catch((грешка) => {
конзола.error (грешка);
 });

Имайте предвид, че ясно() ще изтрие за постоянно всички данни, съхранени в AsyncStorage.

Кеширане на данни с AsyncStorage

Кеширането на данни е обичайна практика при разработването на мобилни приложения за подобряване на производителността и намаляване на мрежовите заявки. С AsyncStorage можете лесно да кеширате данни в приложенията на React Native.

Когато получите достъп до част от данните, данните първо се проверяват, за да се види дали вече са в кеша. Ако е така, тогава данните се връщат от кеша. Ако не е, тогава програмата извлича данните от по-постоянното място за съхранение и ги съхранява в кеша. Следващият път, когато получите достъп до данните, те ще бъдат върнати от кеша.

Да предположим, че имате приложение, което показва списък с книги, извлечени от API. За да подобрите производителността, можете да кеширате извлечените данни от книгата с помощта на AsyncStorage.

Ето примерна реализация на това:

конст [книги, setBooks] = useState([]);
useEffect(() => {
конст fetchBooks = асинхронен () => {
опитвам {
// Проверете дали кешираните данни съществуват
конст кеширани данни = изчакайте AsyncStorage.getItem('cachedBooks');


ако (кеширани данни!== нула) {
// Ако кешираните данни съществуват, анализирайте ги и ги задайте като първоначално състояние
 setBooks(JSON.parse (cachedData));
 } друго {
// Ако кешираните данни не съществуват, извлечете данни от API
конст отговор = изчакайте извличане (' https://api.example.com/books');
конст данни = изчакайте response.json();


// Кеширане на извлечените данни
изчакайте AsyncStorage.setItem('cachedBooks', JSON.stringify (данни));


// Задаване на извлечените данни като първоначално състояние
 setBooks (данни);
 }
 } улов (грешка) {
конзола.error (грешка);
 }
 };
 fetchBooks();
 }, []);

В този пример използвате useEffect кука за извличане на данните от книгата. В рамките на fetchBooks функция, проверете дали кешираните данни съществуват чрез извикване AsyncStorage.getItem('cachedBooks'). Ако кешираните данни съществуват, анализирайте ги с помощта на JSON.parse и го задайте като първоначално състояние, използвайки setBooks. Това ви позволява незабавно да покажете кешираните данни.

Ако кешираните данни не съществуват, извличане на данните от API с помощта на метода fetch().. След като данните бъдат върнати, кеширайте ги чрез извикване AsyncStorage.setItem(). След това задайте извлечените данни като първоначално състояние, като гарантирате, че по-нататъшните визуализации ще показват извлечените данни.

Вече можете да показвате кешираните книги по този начин:

импортиране Реагирайте, {useEffect, useState} от"реагира";
импортиране { Изглед, Текст, Плосък списък } от"реагиране на родния";
импортиране AsyncStorage от'@react-native-async-storage/async-storage';
конст Приложение = () => {
връщане (

Списък с книги</Text>
 данни={книги}
 keyExtractor={(item) => item.id.toString()}
 renderItem={({ елемент }) => (

{item.title}</Text>
{item.author}</Text>
 </View>
 )}
 />
 </View>
 );
};
износпо подразбиране Приложение;

По-нататъшното стартиране на приложението или презареждането на екрана ще покаже кешираните данни, без да се правят ненужни заявки за API.

Използване на AsyncStorage за динамично зареждане на данни

React Native AsyncStorage предлага мощно решение за съхранение и извличане на данни. Използвайки възможностите за кеширане, той подобрява производителността и осигурява по-бърз достъп до съхранените данни.

Когато комбинирате познания за AsyncStorage с техники като персонализирана пагинация, можете динамично да зареждате и показвате данни във вашето приложение React Native. Това ще даде възможност за ефективна обработка на големи набори от данни.