现代Dart（含空安全）中如何读取Chrome存储返回的JsObject？

方法1：直接通过键访问取值 #

JsObject支持类似JavaScript对象的下标访问，你可以直接通过键名获取对应的值，再转换为匹配的Dart类型：

void _getCallback(dynamic stuff) {
  JsObject obj = stuff as JsObject;
  // 根据实际存储的数据类型转换，比如String、int、bool等
  String? targetValue = obj['r'] as String?;
  print('获取到的目标值：$targetValue');
}

方法2：用package:js封装API实现类型安全（推荐） #

在现代Dart空安全环境下，更推荐通过package:js的注解封装Chrome Storage API，避免直接操作JsObject，让代码更清晰且类型可控：

先确保pubspec.yaml中依赖package:js：

dependencies:
  js: ^0.6.7 # 使用最新稳定版本

然后封装Chrome Storage相关接口：

import 'package:js/js.dart';

// 定义Storage get方法的回调类型
typedef StorageGetCallback = void Function(JsObject result);

// 绑定chrome.storage.local对象
@JS('chrome.storage.local')
external JsObject get chromeStorageLocal;

// 封装get方法
@JS()
external void get(List<String> keys, StorageGetCallback callback);

调用时的代码会更简洁，处理数据也更直观：

void fetchStorageData() {
  get(['r'], (JsObject result) {
    String? storedValue = result['r'] as String?;
    print('存储的值：$storedValue');
  });
}

方法3：将JsObject转换为Dart Map #

如果需要查看JsObject的所有键值对，可以遍历其keys属性，转换为Dart原生Map：

void _getCallback(dynamic stuff) {
  JsObject obj = stuff as JsObject;
  Map<String, dynamic> dartMap = {};
  // 遍历所有键并转换为Dart Map
  for (var key in obj.keys) {
    dartMap[key as String] = obj[key];
  }
  print('完整的键值对：$dartMap');
  // 后续可像操作普通Map一样获取数据
  String? value = dartMap['r'] as String?;
}

内容的提问来源于stack exchange，提问作者Connor O'Leary