Flutter WebView重启App后聊天页昵称会话丢失如何持久化保存

官方webview_flutter组件默认不会在App进程完全退出后持久化保存站点Cookie、LocalStorage等会话数据，存储在Cookie中的聊天室昵称会在App重启后被清空。

1. 优先开启组件原生持久化能力 #

webview_flutter 3.0及以上版本自带持久化支持，不需要额外引入第三方包，只要在WebView初始化前显式开启对应配置即可。配置要放在App启动初始化阶段（main函数runApp前、或者首个承载WebView页面的initState生命周期里）执行，不要等WebView构建完成再设置：

import 'package:webview_flutter/webview_flutter.dart';
import 'package:webview_flutter_wkwebview/webview_flutter_wkwebview.dart';
import 'package:webview_flutter_android/webview_flutter_android.dart';

void initWebViewPersistentConfig() async {
  // Android端强制开启第三方Cookie支持，否则站点Cookie无法正常落盘
  WebViewCookieManager().setAcceptThirdPartyCookies(true);
  // iOS端替换默认临时存储为系统持久化存储
  if (WebView.platform is WebKitWebView) {
    final config = WebKitWebViewConfiguration(
      websiteDataStore: WKWebsiteDataStore.defaultDataStore(),
    );
    WebView.platform = WebKitWebView(configuration: config);
  }
}

初始化配置完成后，调整原有WebView的构造逻辑，不要拦截页面导航请求打断Cookie写入流程：

WebView(
  initialUrl: 'https://XXXX',
  javascriptMode: JavascriptMode.unrestricted,
  navigationDelegate: (NavigationRequest request) {
    // 直接放行所有同域名跳转，不要拦截
    return NavigationDecision.navigate;
  },
  gestureRecognizers: [
    Factory(() => PlatformViewVerticalGestureRecognizer()),
  ].toSet(),
)

2. 内置持久化不生效时手动兜底存储 #

如果因为插件版本、系统定制限制导致原生持久化失效，可以手动读写Cookie做兜底：

• 先引入shared_preferences作为Flutter端的本地持久化载体，用来存储拿到的Cookie字符串
• 在WebView的onPageFinished回调中，通过JS读取当前站点下的非HttpOnly Cookie，存到本地：

onPageFinished: (url) async {
  final cookieResult = await controller.runJavascriptReturningResult('document.cookie');
  final prefs = await SharedPreferences.getInstance();
  // 去掉JS返回值自带的引号
  prefs.setString('chat_room_saved_cookie', cookieResult.replaceAll('"', ''));
}

• 下次App启动加载WebView前，把本地存的Cookie通过请求头注入到页面请求中：

// 初始化WebViewController后、加载页面前执行
final prefs = await SharedPreferences.getInstance();
final savedCookie = prefs.getString('chat_room_saved_cookie') ?? '';
if (savedCookie.isNotEmpty) {
  controller.loadRequest(
    Uri.parse('https://XXXX'),
    headers: {'Cookie': savedCookie},
  );
} else {
  controller.loadRequest(Uri.parse('https://XXXX'));
}

注意：如果聊天室的昵称相关Cookie设置了HttpOnly属性，JS无法读取到对应内容，这种场景必须用第一种原生持久化方案，手动JS读写Cookie的方式无效。

3. 常见避坑点 #

• iOS端不要使用WKWebsiteDataStore.nonPersistentDataStore()初始化配置，该实例是内存级临时存储，App杀进程后数据会直接清空
• Android端不要主动调用CookieManager.removeAllCookies、WebStorage.deleteAllData这类清理接口，即便是PageView切页WebView被dispose，只要不主动清理，持久化存储的数据不会丢失
• 部分深度定制安卓系统会默认拦截第三方WebView的本地写入权限，要确保App已经拿到必要的存储权限，否则Cookie无法写入本地磁盘
• 如果聊天室同时用LocalStorage存用户信息，原生持久化方案会默认同时持久化LocalStorage内容，不需要额外处理

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