Локальное хранилище: AsyncStorage

Учимся сохранять данные прямо на телефоне, чтобы они не пропадали после закрытия приложения.

AsyncStorage — простое хранилище «ключ-значение» на устройстве; данные переживают перезапуск приложения. Мобильный аналог localStorage, но асинхронный.

Зачем нужно

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

Установка

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

Главное отличие от localStorage

В вебе localStorage синхронный. AsyncStorage — асинхронный: каждый метод возвращает Promise, поэтому используют async/await. И хранит он только строки — объекты нужно превращать в JSON.

Сохранить значение

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

async function saveName(name) {
  await AsyncStorage.setItem("user_name", name);
  console.log("Сохранено");
}

Прочитать значение

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

async function loadName() {
  const name = await AsyncStorage.getItem("user_name");
  // если ключа нет — вернётся null
  return name;
}

Хранение объектов через JSON

Поскольку хранятся только строки, объект сначала превращают в строку через JSON.stringify, а при чтении — обратно через JSON.parse.

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

async function saveSettings(settings) {
  const json = JSON.stringify(settings);
  await AsyncStorage.setItem("settings", json);
}

async function loadSettings() {
  const json = await AsyncStorage.getItem("settings");
  return json != null ? JSON.parse(json) : null;
}

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

Сериализация — обычный JS

Превращение объекта в строку и обратно — это обычный JavaScript, который и использует AsyncStorage. Запускаемый пример:

const settings = { theme: "dark", fontSize: 16 };

// сохраняем: объект -> строка
const json = JSON.stringify(settings);
console.log("Строка для хранилища:", json);

// читаем: строка -> объект
const restored = JSON.parse(json);
console.log("Тема:", restored.theme);

Вывод:

Строка для хранилища: {"theme":"dark","fontSize":16}
Тема: dark

Когда AsyncStorage не подходит

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

Итог

• AsyncStorage — простое хранилище «ключ-значение», переживает перезапуск приложения.
• Оно асинхронное (работаем через await) и хранит только строки.
• Объекты сохраняют через JSON.stringify и читают через JSON.parse.