Flutter Web端如何清除webview缓存和Cookie并兼容多平台

要同时兼容移动端和Web端实现WebView的Cookie、缓存清除能力，可采用「平台区分实现+统一调用入口」的方案，具体实现如下：

1. 依赖选型调整 #

不再单独维护webviewx和webview_flutter两套逻辑，改为使用官方维护的跨平台WebView组件组：

• 移动端使用webview_flutter，支持Android、iOS全能力
• Web端使用webview_flutter_web作为webview_flutter的Web端补充实现，调用逻辑完全复用移动端的API

# pubspec.yaml 依赖配置
webview_flutter: ^4.4.0
webview_flutter_web: ^0.2.2

如果不想替换现有webviewx依赖也可直接使用后续的清除逻辑，webviewx的Web端渲染也是基于iframe，缓存、Cookie规则完全兼容。

2. 分平台清除逻辑实现 #

2.1 移动端实现 #

直接调用webview_flutter自带的Cookie管理API即可：

import 'package:webview_flutter/webview_flutter.dart';

Future<void> clearMobileCookies() async {
  final cookieManager = WebViewCookieManager();
  // 清除所有Cookie
  await cookieManager.clearCookies();
  // 可选清除其他缓存内容
  final controller = WebViewController();
  await controller.clearCache();
  await controller.clearLocalStorage();
}

2.2 Web端实现 #

Web端的WebView本质是页面内的iframe元素，Cookie归属当前浏览器站点管辖，通过JS调用浏览器原生API清除即可：

import 'dart:js' as js;
import 'dart:html' as html;
import 'package:flutter/foundation.dart';

Future<void> clearWebCookies(String oauthDomain) async {
  // 清除指定OAuth域名下的所有Cookie
  js.context.callMethod('eval', [
    """
    document.cookie.split(";").forEach(function(c) { 
      document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/;domain=$oauthDomain"); 
    });
    """
  ]);
  // 清除本地缓存
  html.window.localStorage.clear();
  html.window.sessionStorage.clear();
}

2.3 统一调用入口 #

import 'dart:io';

Future<void> clearAllCookies(String oauthDomain) async {
  if (kIsWeb) {
    await clearWebCookies(oauthDomain);
  } else if (Platform.isAndroid || Platform.isIOS) {
    await clearMobileCookies();
  }
}

每次触发打开WebView登录流程前先调用clearAllCookies方法，再加载OAuth授权地址，即可实现每次都需要用户手动登录的效果。

注意：Web端如果OAuth服务和你的站点属于跨域场景，需要OAuth服务端配合在登录响应头添加Cache-Control: no-cache, no-store, must-revalidate，同时在授权地址后追加随机参数?t=${DateTime.now().millisecondsSinceEpoch}避免缓存命中。

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