Узнайте, как реализовать эту асинхронную и глобальную систему хранения ключей и значений для вашего приложения 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. Это делает его идеальным для хранения данных, к которым требуется частый доступ, таких как пользовательские настройки и состояние приложений.

Методы асинхронного хранилища

Чтобы установить реагировать родное асинхронное хранилище package, выполните следующую команду в терминале вашего проекта:

Установка npm @react-native-async-storage/async-storage

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

Вы должны использовать асинхронно/ожидание синтаксис или аналогичный метод при вызове методов AsyncStorage.

Запись данных с использованием методов setItem() и multiSet()

установитьЭлемент() и мультинабор() методы используются для установки значений для данного ключа. Эти методы принимают ключ и значения в качестве параметров.

Метод вернет обещание, которое разрешается логическим значением, указывающим, была ли операция успешной, или отклоняется с ошибкой, если операция не удалась:

// Сохраняем значение для ключа "user"
Ждите AsyncStorage.setItem('пользователь', 'Джон');
// Сохраняем несколько значений для ключа "user"
Ждите AsyncStorage.multiSet(['пользователь', 'Джон', 'лань']);

Чтение данных с использованием методов getItem() и multiGet()

С получитьэлемент() метод, вы можете вытащить сохраненные данные из хранилища, используя ключ для значения, которое вы хотите получить. Если переданный ключ не существует, промис отклоняется с ошибкой:

константа имя = Ждите AsyncStorage.getItem('пользователь');

Значение, возвращаемое получитьэлемент() является строкой. Если вам нужно хранить данные в другом формате, вы можете использовать JSON.stringify() для преобразования данных в строку перед их сохранением. Затем используйте JSON.parse() чтобы преобразовать строку обратно в исходный тип данных при ее извлечении.

Например:

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

Вы также можете использовать мультиПолучить() метод для извлечения нескольких пар ключ-значение. Метод примет массив ключей, которые должны быть строками.

Слияние данных с использованием методов mergeItem() и multiMerge()

объединитьЭлемент() и мультислияние() методы объединяют данное значение с существующим значением для данного ключа. Значение, переданное объединитьЭлемент() может быть любым типом данных. Однако важно отметить, что AsyncStorage не шифрует данные, поэтому любой, у кого есть доступ к устройству, может прочитать данные:

Ждите AsyncStorage.mergeItem('имя', 'Джейн Доу');

объединитьЭлемент() принимает ключ для значения, которое вы хотите объединить, и новое значение, которое вы хотите объединить с существующим значением ключа. Использовать мультислияние() чтобы объединить более одного элемента в значение ключа.

Очистить хранилище с помощью метода clear()

прозрачный() Метод позволяет удалить все элементы, хранящиеся в AsyncStorage. Это может быть полезно в различных сценариях, например, когда вам нужно сбросить состояние приложения во время выхода пользователя из системы или очистить кешированные данные на вашем мобильном телефоне.

Например:

константа очистить данные = асинхронный () => {
пытаться {
Ждите Асинхронное хранилище.очистить();

 } ловить д) {
консоль.ошибка (е);
 }
};

Приведенный выше код удалит все пары ключ-значение, хранящиеся в AsyncStorage.

Кроме того, вы можете предоставить функцию обратного вызова для прозрачный(), который будет вызываться после завершения операции:

Асинхронное хранилище.очистить()
 .затем(() => {
// Операция очистки завершена

 })
 .ловить((ошибка) => {
консоль.error (ошибка);
 });

Обратите внимание, что прозрачный() метод безвозвратно удалит все данные, хранящиеся в AsyncStorage.

Кэширование данных с помощью AsyncStorage

Кэширование данных — обычная практика в разработке мобильных приложений для повышения производительности и сокращения сетевых запросов. С помощью AsyncStorage вы можете легко кэшировать данные в приложениях React Native.

Когда вы получаете доступ к фрагменту данных, данные сначала проверяются, чтобы убедиться, что они уже находятся в кэше. Если это так, то данные возвращаются из кеша. Если это не так, то программа извлекает данные из более постоянного места хранения и сохраняет их в кэше. В следующий раз, когда вы получите доступ к данным, они будут возвращены из кеша.

Предположим, у вас есть приложение, отображающее список книг, полученных из API. Чтобы повысить производительность, вы можете кэшировать данные извлеченной книги с помощью AsyncStorage.

Вот пример реализации этого:

константа [книги, setBooks] = useState([]);
использоватьЭффект(() => {
константа fetchBooks = асинхронный () => {
пытаться {
// Проверяем, существуют ли кэшированные данные
константа кэшированные данные = Ждите AsyncStorage.getItem('кэшированные книги');


если (кэшированные данные !== нулевой) {
// Если кэшированные данные существуют, проанализируйте и установите их как начальное состояние
 установитьКниги(JSON.parse (кэшированные данные));
 } еще {
// Если кешированные данные не существуют, получаем данные из API
константа ответ = Ждите принести(' https://api.example.com/books');
константа данные = Ждите ответ.json();


// Кэшируем полученные данные
Ждите AsyncStorage.setItem('кэшированные книги', JSON.stringify (данные));


// Устанавливаем полученные данные в качестве начального состояния
 setBooks (данные);
 }
 } ловить (ошибка) {
консоль.error (ошибка);
 }
 };
 выборка книг();
 }, []);

В этом примере вы используете использованиеЭффект ловушка для получения данных книги. В рамках fetchBooks проверьте, существуют ли кэшированные данные, вызвав AsyncStorage.getItem('кэшированные книги'). Если кэшированные данные существуют, проанализируйте их с помощью JSON.parse и установите его в качестве начального состояния, используя setBooks. Это позволяет сразу отображать кэшированные данные.

Если кэшированные данные не существуют, получить данные из API с помощью метода fetch(). Как только данные будут возвращены, кэшируйте их, вызвав Асинхронное хранилище.setItem(). Затем установите извлеченные данные в качестве начального состояния, гарантируя, что дальнейшие рендеры будут отображать извлеченные данные.

Теперь вы можете отображать кэшированные книги следующим образом:

Импортировать Реагировать, {useEffect, useState} от«реагировать»;
Импортировать { Вид, текст, плоский список } от«реагирующий нативный»;
Импортировать Асинстораже от'@react-native-async-storage/async-storage';
константа Приложение = () => {
возвращаться (

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

{элемент.название}</Text>
{элемент.автор}</Text>
 </View>
 )}
 />
 </View>
 );
};
экспортпо умолчанию Приложение;

Дальнейшие запуски приложения или перезагрузка экрана будут отображать кэшированные данные без ненужных запросов API.

Использование AsyncStorage для динамической загрузки данных

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

Когда вы сочетаете знание AsyncStorage с такими методами, как пользовательское разбиение на страницы, вы можете динамически загружать и отображать данные в своем приложении React Native. Это позволит эффективно обрабатывать большие наборы данных.