Урок 03

AsyncStorage

AsyncStorage — асинхронное хранилище ключ-значение. Аналог localStorage, но асинхронный.

Установка

npx expo install @react-native-async-storage/async-storage

Базовые операции

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

// Сохранить
await AsyncStorage.setItem('theme', 'dark');

// Прочитать
const theme = await AsyncStorage.getItem('theme');

// Удалить
await AsyncStorage.removeItem('theme');

// Очистить всё
await AsyncStorage.clear();

Все методы асинхронные. Всегда await.

Объекты

Хранит только строки. Объекты — через JSON:

await AsyncStorage.setItem('user', JSON.stringify(user));
const user = JSON.parse(await AsyncStorage.getItem('user') ?? 'null');

Или через хук:

function useAsyncStorage<T>(key: string, initial: T) {
    const [value, setValue] = useState<T>(initial);

    useEffect(() => {
        AsyncStorage.getItem(key).then((stored) => {
            if (stored) setValue(JSON.parse(stored));
        });
    }, [key]);

    const update = useCallback(async (newValue: T) => {
        setValue(newValue);
        await AsyncStorage.setItem(key, JSON.stringify(newValue));
    }, [key]);

    return [value, update] as const;
}

Несколько операций

await AsyncStorage.multiSet([
    ['key1', 'value1'],
    ['key2', 'value2'],
]);

const values = await AsyncStorage.multiGet(['key1', 'key2']);
// [['key1', 'value1'], ['key2', 'value2']]

await AsyncStorage.multiRemove(['key1', 'key2']);

Все ключи

const keys = await AsyncStorage.getAllKeys();

Что хранить

  • Настройки (тема, язык)
  • Онбординг (пройден ли)
  • Кеш данных
  • Черновики
  • История поиска

Что не хранить

  • Токены — используй SecureStore
  • Пароли — никогда
  • Персональные данные — шифруй или не храни
  • Большие объёмы — есть лимиты

SecureStore для токенов

npx expo install expo-secure-store

import * as SecureStore from 'expo-secure-store';

await SecureStore.setItemAsync('token', token);
const token = await SecureStore.getItemAsync('token');
await SecureStore.deleteItemAsync('token');

Keychain (iOS) / Keystore (Android). Безопасно.

Разница:

  • AsyncStorage — обычное хранилище, не защищено
  • SecureStore — шифрование, системная защита

MMKV

Альтернатива с лучшей производительностью:

npm install react-native-mmkv

import { MMKV } from 'react-native-mmkv';

const storage = new MMKV();

storage.set('theme', 'dark');
const theme = storage.getString('theme');
storage.delete('theme');

Синхронный, быстрый, но не для Expo Go (нужен dev client).

Если ты уже знаешь React

localStorage в вебе синхронный. AsyncStorage — асинхронный. Всегда await.

Итоги

  • AsyncStorage для настроек и кеша
  • SecureStore для токенов
  • Только строки — объекты через JSON
  • Все методы асинхронные
  • MMKV для производительности
  • Не храни пароли и чувствительные данные