flutter webview如何保存cookie

我在Flutter中使用WebView加载网页时，发现每次重新打开应用后Cookie都会丢失。请问应该如何持久化保存WebView中的Cookie，让用户下次打开应用时能保持登录状态？具体需要在哪里配置？是否需要用到flutter_webview_plugin或官方webview_flutter插件的特殊设置？

2 回复

在Flutter WebView中保存Cookie，可以使用cookie_manager插件。初始化WebView后，通过CookieManager().setCookie()方法设置Cookie，系统会自动保存。确保在WebViewController中启用JavaScript和Cookie支持。

更多关于flutter webview如何保存cookie的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter WebView 中保存 Cookie，可以通过以下方法实现：

1. 使用 webview_flutter 插件

import 'package:webview_flutter/webview_flutter.dart';

WebViewController _controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..loadRequest(Uri.parse('https://example.com'))
  ..setNavigationDelegate(NavigationDelegate(
    onPageFinished: (String url) async {
      // 获取并保存 Cookie
      final cookies = await _controller.runJavaScriptReturningResult(
        'document.cookie'
      );
      // 保存到本地存储
      await _saveCookies(cookies.toString());
    },
  ));

2. 使用 shared_preferences 保存 Cookie

import 'package:shared_preferences/shared_preferences.dart';

// 保存 Cookie
Future<void> _saveCookies(String cookies) async {
  final prefs = await SharedPreferences.getInstance();
  await prefs.setString('webview_cookies', cookies);
}

// 读取 Cookie
Future<String?> _loadCookies() async {
  final prefs = await SharedPreferences.getInstance();
  return prefs.getString('webview_cookies');
}

// 在 WebView 初始化时设置 Cookie
WebViewController _controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..loadRequest(Uri.parse('https://example.com'))
  ..setNavigationDelegate(NavigationDelegate(
    onPageStarted: (String url) async {
      final savedCookies = await _loadCookies();
      if (savedCookies != null) {
        await _controller.runJavaScript(
          'document.cookie = "$savedCookies"'
        );
      }
    },
  ));

3. 使用 flutter_webview_plugin（已弃用，但功能完整）

import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

final webviewPlugin = FlutterWebviewPlugin();

// 监听 Cookie 变化
webviewPlugin.onCookies.listen((cookie) {
  // 保存 Cookie
  _saveCookies(cookie);
});

4. 完整示例

class WebViewPage extends StatefulWidget {
  @override
  _WebViewPageState createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  late WebViewController _controller;

  @override
  void initState() {
    super.initState();
    _initializeWebView();
  }

  Future<void> _initializeWebView() async {
    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(Uri.parse('https://example.com'))
      ..setNavigationDelegate(NavigationDelegate(
        onPageStarted: (url) async {
          // 加载保存的 Cookie
          final cookies = await _loadCookies();
          if (cookies != null) {
            await _controller.runJavaScript(
              'document.cookie = "$cookies"'
            );
          }
        },
        onPageFinished: (url) async {
          // 保存新的 Cookie
          final newCookies = await _controller.runJavaScriptReturningResult(
            'document.cookie'
          );
          await _saveCookies(newCookies.toString());
        },
      ));
  }

  // 保存和加载 Cookie 的方法同上
}

注意事项：

  • 确保在 pubspec.yaml 中添加依赖：webview_flutter 和 shared_preferences
  • Cookie 有域名限制，只能在同域名下使用
  • 考虑 Cookie 的过期时间管理
  • 对于敏感信息，建议使用更安全的存储方式

这种方法可以有效地在 Flutter WebView 中保存和恢复 Cookie，保持用户的登录状态。

回到顶部