Flutter Web打开新Tab加载部件时如何通过查询参数传递数据

这是最通用、最简单的实现方式，步骤如下：

1. 构造带查询参数的目标页URL，Flutter的Uri类会自动完成参数编码，无需手动处理特殊字符

   import 'dart:html' as html;
   
   void openGoogleMapTab(double latitude, double longitude) {
     // 组装查询参数
     final queryParams = {
       'lat': latitude.toStringAsFixed(8), // 保留足够小数位保证坐标精度
       'lng': longitude.toStringAsFixed(8),
     };
     // 生成完整目标URL
     final targetUri = Uri(
       path: '/google-map-page', // 你的地图页路由路径
       queryParameters: queryParams,
     );
     // 打开新Tab
     html.window.open(targetUri.toString(), '_blank');
   }
   

2. 新Tab的地图页初始化时读取URL参数即可

   import 'dart:html' as html;
   
   // 地图页初始化逻辑中调用
   (double? lat, double? lng) getLatLngFromUrl() {
     final currentUri = Uri.parse(html.window.location.href);
     final lat = double.tryParse(currentUri.queryParameters['lat'] ?? '');
     final lng = double.tryParse(currentUri.queryParameters['lng'] ?? '');
     return (lat, lng);
   }
   

该方案支持用户直接书签保存带参数的地图页，下次打开仍可直接加载对应坐标的地图

• 方案1：通过localStorage/sessionStorage传递
  同源站点的所有Tab共享同域本地存储，打开新Tab前写入数据，新Tab初始化后读取即可，适合不想把参数暴露在URL的场景
  发送端代码：

  void openMapWithStorage(double lat, double lng) {
    html.window.localStorage['map_lat'] = lat.toString();
    html.window.localStorage['map_lng'] = lng.toString();
    html.window.open('/google-map-page', '_blank');
  }
  

  接收端代码：

  (double? lat, double? lng) getLatLngFromStorage() {
    final lat = double.tryParse(html.window.localStorage['map_lat'] ?? '');
    final lng = double.tryParse(html.window.localStorage['map_lng'] ?? '');
    // 读取完成后可删除临时存储的数据
    html.window.localStorage.remove('map_lat');
    html.window.localStorage.remove('map_lng');
    return (lat, lng);
  }
  

  限制：仅同源页面可用，用户禁用本地存储时会失效

• 方案2：通过Broadcast Channel API实现实时通信
  适合跨Tab需要后续实时交互的场景，无需依赖存储或URL参数，同源页面间可以直接双向传消息
  发送端代码：

  void openMapWithChannel(double lat, double lng) {
    final channel = html.BroadcastChannel('map_data_channel');
    html.window.open('/google-map-page', '_blank');
    // 发送坐标数据
    channel.postMessage({'type': 'init_map', 'lat': lat, 'lng': lng});
  }
  

  接收端代码：

  void listenMapData() {
    final channel = html.BroadcastChannel('map_data_channel');
    channel.onMessage.listen((event) {
      final data = event.data as Map;
      if (data['type'] == 'init_map') {
        final lat = data['lat'] as double;
        final lng = data['lng'] as double;
        // 初始化地图即可
      }
    });
  }
  

• 方案3：通过IndexedDB传递
  如果需要传递包含经纬度在内的大量结构化地图数据，可以使用IndexedDB做临时存储，新Tab读取后再删除，支持更大的存储容量和结构化数据查询，使用逻辑和localStorage类似。

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