Flutter如何存储API数据到本地并避免重复请求

步骤1：添加本地存储依赖 #

选择shared_preferences（适合轻量数据存储），在pubspec.yaml中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.2.2

步骤2：重构getUser方法，优先读取本地数据 #

修改原方法逻辑，先尝试读取本地缓存数据，存在则直接返回；无有效缓存时再调用API，获取数据后存入本地：

late Future<User> userFuture = getUser();
static Future<User> getUser() async {
  // 初始化本地存储实例
  final prefs = await SharedPreferences.getInstance();
  final cachedUserJson = prefs.getString('cached_user');

  // 优先读取本地缓存
  if (cachedUserJson != null) {
    try {
      return User.fromJson(jsonDecode(cachedUserJson));
    } catch (e) {
      // 缓存解析失败，清除无效数据
      await prefs.remove('cached_user');
    }
  }

  // 本地无有效缓存，调用API获取数据
  var url = '${Constants.API_URL_DOMAIN}action=user_profile&token=${Constants.USER_TOKEN}';
  final response = await http.get(Uri.parse(url));
  final body = jsonDecode(response.body);
  final user = User.fromJson(body['data']);

  // 将新数据存入本地缓存
  await prefs.setString('cached_user', jsonEncode(user.toJson()));

  return user;
}

注意：你的User类需要补充toJson()方法，用于将对象转为JSON字符串存储，示例如下：

class User {
  // 原有属性和fromJson方法
  Map<String, dynamic> toJson() {
    return {
      'id': id,
      'name': name,
      'avatar': avatar,
      // 补充其他对应字段
    };
  }
}

步骤3：保留原有FutureBuilder并添加刷新逻辑 #

原FutureBuilder代码可直接复用，若需要主动更新用户数据（比如用户修改资料后），可添加刷新方法：

void refreshUser() {
  setState(() {
    userFuture = getUser();
  });
}

在页面中添加按钮或触发事件调用refreshUser()，即可重新获取API数据并更新本地缓存。

额外优化建议 #

• 可给缓存添加过期时间：存储数据时同时记录时间戳，读取时判断是否过期，过期则重新调用API。
• 若处理大量复杂数据，推荐使用Hive或Isar这类本地NoSQL数据库，性能更优。

内容的提问来源于stack exchange，提问作者st4tic