Flutter Web开发：Cookie正确存储与读取的实现方法

之前使用方案失效的核心原因 #

• shared_preferences在Web端的设计逻辑就是将所有存储键值映射到浏览器Local Storage分区，完全不会操作浏览器原生Cookie存储，所以你能在Local Storage看到存储内容、在Cookie面板看不到是符合其设计预期的表现
• 跨平台场景常用的各类cookieJar实现，大多没有针对Flutter Web环境做原生Cookie写入适配，默认会将Cookie保存在应用内存、或者应用自定义的独立存储分区，和浏览器托管的Cookie存储完全隔离，因此无法通过Chrome的Cookie管理扩展观测到

基于dart:html的原生Cookie操作实现 #

Flutter Web环境下要写入浏览器可识别、可被Cookie扩展观测的原生Cookie，唯一可靠的路径是直接调用浏览器提供的document.cookie接口，没有其他跨平台插件可以替代这个逻辑。

存储认证Cookie（登录成功后执行） #

import 'dart:html' as html;

void saveAuthCredential(String token) {
  // 拼接符合浏览器规范的Cookie字符串
  final cookieContent = [
    'auth_token=$token',
    'path=/', // 匹配站点全路径，保证所有接口请求都能携带
    'max-age=86400', // 按业务需求设置Cookie有效时长
    'secure=true', // 生产HTTPS环境开启，禁止HTTP下传输
    'sameSite=Lax' // 按跨域需求调整，基础防CSRF
  ].join('; ');

  // 直接写入浏览器Cookie存储
  html.document.cookie = cookieContent;
}

写入完成后，浏览器会自动托管该Cookie，后续同域发起的网络请求会自动在请求头中携带这个Cookie，不需要手动拼接请求头。

读取已存储的认证Cookie #

String? getAuthCredential() {
  // 获取当前域下所有Cookie拼接成的字符串
  final allCookies = html.document.cookie?.split('; ') ?? [];
  for (final item in allCookies) {
    final cookiePair = item.split('=');
    if (cookiePair[0] == 'auth_token') {
      // 处理值中包含等号的场景
      return cookiePair.sublist(1).join('=');
    }
  }
  return null;
}

清除认证Cookie（退出登录场景执行） #

void clearAuthCredential() {
  // 浏览器删除Cookie的逻辑是将同名Cookie的max-age设为0
  html.document.cookie = 'auth_token=; path=/; max-age=0;';
}

实操注意事项 #

• 本地开发使用HTTP协议访问时，不要设置secure=true属性，否则浏览器会直接拒绝写入该Cookie，导致存储失败
• 若使用Dio等网络库发起跨域请求，需要在请求配置中手动开启withCredentials: true，否则即使Cookie已经存在浏览器存储中，跨域请求也不会自动携带该Cookie
• 不要依赖仅针对移动端实现的Cookie管理插件完成Web端Cookie操作，这类插件的存储逻辑和浏览器原生Cookie完全隔离，无法实现跨请求自动携带的效果

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