Flutter Web中如何便捷使用Session Storage存储数据？

首先需要明确：Session Storage是Web浏览器特有的存储机制，Flutter作为跨平台框架本身没有原生的对应API，但可以根据目标平台的特性，实现等效的会话级存储效果——即数据仅在当前会话（Web端为标签页生命周期，移动端为App运行周期）内有效，会话结束后自动清空。

1. Web平台：直接操作原生Session Storage #

在Flutter Web环境中，可以直接通过dart:html库调用浏览器的Session Storage API，无需额外依赖：

import 'dart:html';

// 写入数据
window.sessionStorage['user_token'] = 'abc123';

// 读取数据
String? token = window.sessionStorage['user_token'];

// 删除指定键的数据
window.sessionStorage.remove('user_token');

// 清空所有会话存储数据
window.sessionStorage.clear();

注意：dart:html仅在Web环境可用，若你的项目需要兼容其他平台，需通过条件导入或平台判断避免编译错误。

2. 移动端/桌面端：模拟Session Storage行为 #

移动端和桌面端没有原生的Session Storage，我们可以结合内存缓存 + 本地存储（如SharedPreferences）来模拟会话级存储的效果——数据在App运行期间保持，退出App或主动调用清空方法时删除：

示例实现类：

import 'package:shared_preferences/shared_preferences.dart';

class SessionStorage {
  // 内存缓存，提升读取速度
  static final Map<String, dynamic> _inMemoryCache = {};
  // 本地存储的键前缀，区分会话数据和持久化数据
  static const String _keyPrefix = 'session_';

  // 写入会话数据
  static Future<void> setItem(String key, String value) async {
    _inMemoryCache[key] = value;
    final prefs = await SharedPreferences.getInstance();
    await prefs.setString('$_keyPrefix$key', value);
  }

  // 读取会话数据
  static Future<String?> getItem(String key) async {
    // 优先从内存读取
    if (_inMemoryCache.containsKey(key)) {
      return _inMemoryCache[key];
    }
    final prefs = await SharedPreferences.getInstance();
    final value = prefs.getString('$_keyPrefix$key');
    if (value != null) {
      _inMemoryCache[key] = value;
    }
    return value;
  }

  // 删除指定会话数据
  static Future<void> removeItem(String key) async {
    _inMemoryCache.remove(key);
    final prefs = await SharedPreferences.getInstance();
    await prefs.remove('$_keyPrefix$key');
  }

  // 清空所有会话数据（如用户退出登录时调用）
  static Future<void> clear() async {
    _inMemoryCache.clear();
    final prefs = await SharedPreferences.getInstance();
    // 过滤并删除所有带会话前缀的键
    final sessionKeys = prefs.getKeys().where((k) => k.startsWith(_keyPrefix));
    for (final key in sessionKeys) {
      await prefs.remove(key);
    }
  }
}

使用时，只需在App启动初始化（如main函数开头）或用户退出登录时调用SessionStorage.clear()，即可确保会话数据仅在当前App运行周期内有效。

3. 跨平台兼容方案 #

如果你的项目需要同时支持Web和移动端/桌面端，可以通过条件导入实现统一的API调用：

1. 创建两个平台实现文件：

   • session_storage_web.dart（Web平台）：

     import 'dart:html';
     
     class SessionStorage {
       static void setItem(String key, String value) => window.sessionStorage[key] = value;
       static String? getItem(String key) => window.sessionStorage[key];
       static void removeItem(String key) => window.sessionStorage.remove(key);
       static void clear() => window.sessionStorage.clear();
     }
     

   • session_storage_mobile.dart（移动端/桌面端）：
     直接使用上面的SessionStorage类实现即可。

2. 在主业务代码中导入：

   // 根据平台自动选择对应实现
   import 'session_storage_mobile.dart' if (dart.library.html) 'session_storage_web.dart';
   
   // 统一调用示例
   void main() async {
     await SessionStorage.setItem('user_id', '123');
     final userId = await SessionStorage.getItem('user_id');
     print(userId);
   }
   

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