Flutter WebView Plugin：如何处理本地存储避免重复引导Tour

嘿，这个问题我做WebView项目时刚好碰到过！核心原因其实是默认的WebView实例和浏览器的存储是完全隔离的——浏览器会把Tour的完成状态存在本地持久化存储里，但你的App里的WebView每次可能都用了新的临时存储，所以每次加载页面都会从头触发Tour。下面给你几个可行的解决方案：

1. 让WebView启用并持久化本地存储 #

这是最直接的办法，让你的WebView和浏览器一样，把Tour状态存在本地存储里，下次加载时页面就能读取到状态，自动跳过Tour。

以Flutter官方的webview_flutter包为例，你需要在初始化WebViewController时开启DOM存储，并配置缓存策略：

late WebViewController _webViewController;

@override
void initState() {
  super.initState();
  _webViewController = WebViewController()
    // 必须启用JavaScript，Tour逻辑和本地存储操作都依赖JS
    ..setJavaScriptMode(JavaScriptMode.unrestricted)
    // 启用DOM本地存储（对应浏览器里的localStorage）
    ..setDomStorageEnabled(true)
    // 启用数据库存储（部分Tour逻辑可能用到）
    ..setDatabaseEnabled(true)
    // 设置缓存模式，优先加载缓存数据减少重复请求
    ..setCacheMode(WebViewCacheMode.loadCachedData)
    // 加载你的在线目录URL
    ..loadRequest(Uri.parse('https://你的在线目录地址'));
}

如果用的是旧版flutter_webview_plugin，可以直接在WebViewScaffold中开启本地存储：

WebViewScaffold(
  url: 'https://你的在线目录地址',
  withLocalStorage: true, // 启用本地存储持久化
  javascriptMode: JavascriptMode.unrestricted,
)

配置完成后，用户第一次在App里完成Tour，WebView会自动把状态存在本地存储，下次打开WebView时，页面检测到状态就不会再启动Tour了。

2. 手动注入Tour完成状态（可选） #

如果想让用户从一开始就跳过Tour，或者需要从App本地存储同步状态到WebView，可以在页面加载前手动注入localStorage变量：

// 先执行JS设置Tour完成状态，再加载页面
_webViewController.runJavascript('window.localStorage.setItem("tourCompleted", "true");')
  .then((_) {
    _webViewController.loadRequest(Uri.parse('https://你的在线目录地址'));
  });

注意这里的tourCompleted是假设页面判断Tour状态的存储键，你需要换成实际页面使用的键（可以通过浏览器开发者工具，在Application -> Local Storage里找到对应字段）。

3. 验证存储是否生效的小技巧 #

你可以给WebView加个JavaScript通道，用来调试本地存储状态：

_webViewController.addJavaScriptChannel(
  'StorageDebug',
  onMessageReceived: (JavaScriptMessage message) {
    print('WebView本地存储状态: ${message.message}');
  },
);

// 页面加载后读取存储状态并发送到App
_webViewController.runJavascript('window.postMessage(window.localStorage.getItem("tourCompleted"), "*");');

这样就能确认WebView是否正确保存了Tour的状态啦。

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