Введение в AsyncStorage для локального хранения данных — основы работы

Что такое AsyncStorage и зачем он нужен

AsyncStorage — это система для локального хранения данных в формате "ключ-значение" в приложениях React Native. Можно думать о нем, как о версии localStorage, только для мобильных устройств. Как и localStorage, он используется для небольших объемов данных, но в отличие от него, работает асинхронно. Ключевые примеры использования AsyncStorage включают:

• Сохранение данных пользователя. Представьте, что в вашем приложении нужно сохранять токены авторизации или пользовательские настройки.
• Подгрузка состояния после перезапуска. Например, состояние корзины в интернет-магазине или последний открытый экран.
• Кэширование данных API. Это позволяет уменьшить количество запросов к API и улучшить пользовательский опыт.

Преимущества AsyncStorage

1. Простота использования. API интуитивно понятен, и операции вроде записи/чтения данных являются довольно простыми.
2. Асинхронность. Большинство операций выполняются асинхронно, что уменьшает нагрузку на главный поток приложения.
3. Кроссплатформенность. Он работает как на Android, так и на iOS.

Ограничения AsyncStorage

Несмотря на преимущества, у AsyncStorage есть свои минусы:

• Размер хранилища. Подойдет только для небольших объемов данных, например, конфигураций или токенов.
• Не подходит для большого объема данных. Если вы работаете с большими массивами данных, лучше использовать специализированные библиотеки вроде SQLite.

Установка и настройка библиотеки AsyncStorage

Раньше AsyncStorage был встроенным в React Native, но с определенного момента он стал отдельной библиотекой. Установим его в наш проект:

Установка

1. Установим библиотеку через npm:

   npm install @react-native-async-storage/async-storage
   

2. Затем сделаем pod install, если работаем с iOS:

   cd ios && pod install
   

3. Готово! Теперь можно использовать AsyncStorage в нашем проекте.

Основные методы AsyncStorage

Работа с AsyncStorage выполняется через три основные функции:

1. setItem(key, value) — сохраняет данные под указанным ключом.
2. getItem(key) — извлекает данные по ключу.
3. removeItem(key) — удаляет данные по ключу.

Каждый из них возвращает промис, так что, будьте готовы к асинхронной обработке.

Пример использования AsyncStorage

Давайте попробуем реализовать простую функциональность сохранения и извлечения данных. Представьте, что мы создаем приложение для заметок, где пользователь может сохранить текст локально.

Сохранение данных

import AsyncStorage from '@react-native-async-storage/async-storage';

const saveNote = async (note: string) => {
  try {
    await AsyncStorage.setItem('userNote', note); // Сохраняем заметку под ключом 'userNote'
    console.log('Заметка сохранена!');
  } catch (error) {
    console.error('Ошибка сохранения заметки:', error);
  }
};

Извлечение данных

const getNote = async () => {
  try {
    const savedNote = await AsyncStorage.getItem('userNote'); // Извлекаем заметку по ключу 'userNote'
    if (savedNote !== null) {
      console.log('Извлеченная заметка:', savedNote);
      return savedNote;
    }
  } catch (error) {
    console.error('Ошибка извлечения заметки:', error);
  }
};

Удаление данных

const deleteNote = async () => {
  try {
    await AsyncStorage.removeItem('userNote'); // Удаляем заметку из хранилища
    console.log('Заметка удалена!');
  } catch (error) {
    console.error('Ошибка удаления заметки:', error);
  }
};

Преобразование JSON-данных

AsyncStorage работает только с текстовыми данными, а значит, если вы хотите хранить сложные объекты, их нужно предварительно сериализовать в JSON.

// Сохранение сложного объекта
const saveObject = async (userData: { name: string; age: number }) => {
  try {
    const jsonValue = JSON.stringify(userData); // Преобразуем объект в строку
    await AsyncStorage.setItem('userData', jsonValue);
    console.log('Данные пользователя сохранены!');
  } catch (error) {
    console.error('Ошибка сохранения данных пользователя:', error);
  }
};

// Извлечение сложного объекта
const getObject = async () => {
  try {
    const jsonValue = await AsyncStorage.getItem('userData');
    if (jsonValue !== null) {
      const parsedData = JSON.parse(jsonValue); // Преобразуем строку обратно в объект
      console.log('Извлеченные данные пользователя:', parsedData);
      return parsedData;
    }
  } catch (error) {
    console.error('Ошибка извлечения данных пользователя:', error);
  }
};

Типичные ошибки и лучшие практики

Работа с AsyncStorage, как и с любой асинхронной библиотекой, имеет подводные камни:

1. Пропущенная обработка ошибок. Не забудьте обрабатывать исключения как в try/catch, так и в блоках catch промисов. Это особенно важно при работе с реальными устройствами, где могут быть проблемы с памятью.

2. Ограничение на размер. Не пытайтесь хранить огромные данные. Если вам нужно хранить что-то сложнее, чем пара ключ-значение, подумайте об альтернативах вроде SQLite.

3. Асинхронность. Не забывайте, что AsyncStorage возвращает промисы, и ваш код может работать некорректно, если вы не дожидаетесь завершения операций.

Практическая задача: сохранение и извлечение темы оформления

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

1. Сохранять тему в AsyncStorage при изменении.
2. Извлекать тему при запуске приложения и автоматически применять её.

import React, { useEffect, useState } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

const App = () => {
  const [theme, setTheme] = useState<string>('light');

  // Сохранение темы
  const saveTheme = async (selectedTheme: string) => {
    try {
      await AsyncStorage.setItem('appTheme', selectedTheme);
      setTheme(selectedTheme);
    } catch (error) {
      console.error('Ошибка сохранения темы:', error);
    }
  };

  // Извлечение темы при загрузке приложения
  useEffect(() => {
    const fetchTheme = async () => {
      try {
        const savedTheme = await AsyncStorage.getItem('appTheme');
        if (savedTheme) {
          setTheme(savedTheme);
        }
      } catch (error) {
        console.error('Ошибка извлечения темы:', error);
      }
    };

    fetchTheme();
  }, []);

  return (
    <div style={{ background: theme === 'dark' ? '#333' : '#FFF', color: theme === 'dark' ? '#FFF' : '#000' }}>
      <h1>Тема: {theme}</h1>
      <button onClick={() => saveTheme('light')}>Светлая тема</button>
      <button onClick={() => saveTheme('dark')}>Темная тема</button>
</div>
);
};

export default App;

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

2

Задача

Модуль 3: React, 24 уровень, 5 лекция

Недоступна

Сохранение данных в AsyncStorage

Сохранение данных в AsyncStorage

Открыть