本地存储

这一课你将能做到

1. 用 AsyncStorage 存取用户偏好和一般数据，封装成带类型的 storage 工具
2. 说出 AsyncStorage / MMKV / SQLite / SecureStore 的区别，给场景就能选对
3. 用 SecureStore 安全保存 token，并实现「启动时恢复登录态」的标准模式

为什么要学

App 杀掉重开，登录态还在；夜间模式设置不会丢；离线时能看到缓存的列表——这些都靠本地存储。存错地方后果很严重：token 明文放 AsyncStorage，拿 adb 或越狱工具一翻就到手；存大段 JSON 到 SecureStore，超出容量上限直接崩。

人话：手机本地存储就像家里的储物方案——抽屉（AsyncStorage）放日常杂物，保险柜（SecureStore）放存折和证件，档案柜（SQLite）放需要检索的大量资料，速度型寄存器（MMKV）放频繁改写的数据。东西放错地方，要么难找，要么危险。

先建立图像

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

// 存：只能存字符串，返回 Promise
await AsyncStorage.setItem('theme', 'dark');
// 取：取不到返回 null
const theme = await AsyncStorage.getItem('theme'); // 'dark'
// 删
await AsyncStorage.removeItem('theme');

AsyncStorage 的 API 和 Web 的 localStorage 长得几乎一样，但有两条天差地别：第一，全部异步（返回 Promise，不写 await 拿到的是 Promise 不是值）；第二，只能存字符串（对象数组必须 JSON.stringify）。

跟着做

步骤 1：安装 AsyncStorage

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

步骤 2：封装带类型的存储工具

裸用 AsyncStorage 容易出错：存对象忘 stringify、读取忘 parse、key 命名冲突。封装一层：

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

export const storage = {
  async set(key, value) {
    await AsyncStorage.setItem(key, JSON.stringify(value));
  },
  async get(key) {
    const raw = await AsyncStorage.getItem(key);
    try {
      return raw ? JSON.parse(raw) : null;
    } catch {
      return raw; // 万一存的不是 JSON，返回原字符串兜底
    }
  },
  async remove(key) {
    await AsyncStorage.removeItem(key);
  },
};

// 使用：对象数组直接存，不用手写 stringify
await storage.set('user', { name: 'Tom', age: 20 });
const user = await storage.get('user');

AsyncStorage 只能存字符串，这是它和 Web localStorage 最大的坑。忘掉序列化，你读到的永远是 "[object Object]"。

步骤 3：App 启动时恢复登录态（checking 模式）

经典模式：启动时先读存储，读到用户就进主页，没读到去登录。不这么做，已登录用户会看到一闪而过的登录页——体验极差。

import { useState, useEffect } from 'react';
import { ActivityIndicator } from 'react-native';
import { storage } from './utils/storage';

function App() {
  const [user, setUser] = useState(null);
  const [checking, setChecking] = useState(true);

  useEffect(() => {
    (async () => {
      const saved = await storage.get('user');
      if (saved) setUser(saved);
      setChecking(false);
    })();
  }, []);

  if (checking) return <ActivityIndicator style={{ flex: 1 }} />;

  return user ? <MainTabs /> : <LoginScreen onLogin={setUser} />;
}