WebView2 UserData 示例 - 多账号会话隔离

概述

演示 cWebView2Host 的多实例会话隔离功能。在 MDI 应用中，每个子窗体拥有独立的 WebView2 实例和 UserDataFolder，实现多账号并行登录、独立 Cookie 和 localStorage。

项目结构

下载源码 [ 注意：重新到bin目录注册 DLL 文件 ]

代码请到 VBMAN2 项目 demos/webview2/userData 目录获取。

userData/
  ├── MDIForm1.frm           # MDI 父窗体，管理子窗体创建
  ├── Form1.frm              # MDI 子窗体，包含 WebView2 实例
  ├── pic/                   # 运行效果截图
  │   ├── 001.png
  │   ├── 002.png
  │   ├── 003.png
  │   ├── 004.png
  │   └── 005.png
  ├── UserDir/               # 预创建的用户数据目录
  │   ├── account-default/EBWebView/
  │   ├── account-001/EBWebView/
  │   ├── account-002/EBWebView/
  │   └── account-011/EBWebView/
  ├── vbman2_webview2.vbp    # VB6 项目文件（启动对象 = MDIForm1）
  └── vbman2_webview2.vbw    # VB6 工作区文件

核心代码解析

1. MDI 父窗体(MDIForm1.frm)

Private Sub MDIForm_Load()
    Form1.Init    ' 打开默认子窗口
End Sub

Private Sub OpenNewPage_Click()
    Dim Data As String: Data = InputBox(Tip, , "001,http://vb6.pro")
    If Data = "" Then Exit Sub
    Dim AppFix As String: AppFix = Left(Data, 4)
    Dim f As New Form1
    f.Init Left$(AppFix, 3), Mid$(Data, 5)   ' 账号后缀 + URL
End Sub

使用 Dim f As New Form1 动态创建 MDI 子窗体实例，每次输入格式为 账号后缀,URL。

2. MDI 子窗体(Form1.frm)

Dim WithEvents wv As cWebView2Host
Dim AccountAppendFix As String
Dim ThisUrl As String

Public Sub Init(Optional ByVal UserDataFix As String, Optional ByVal Url As String)
    Me.Show
    If Url = "" Then Url = BASE_URL
    ThisUrl = Url
    AccountAppendFix = UserDataFix
    If AccountAppendFix = "" Then AccountAppendFix = "default"
    wv.Initialize Me    ' 传入 Form 对象
End Sub

3. 三阶段初始化 - 配置 UserDataFolder

Private Sub wv_Create()
    ' 设置独立的用户数据目录
    wv.EnvironmentOptions.UserDataFolder = App.Path & "\UserDir\account-" & AccountAppendFix
End Sub

Private Sub wv_Ready()
    ' 导航到目标 URL
    wv.Navigate ThisUrl
End Sub

4. 标题同步

Private Sub wv_DocumentTitleChanged()
    Me.Caption = wv.DocumentTitle
End Sub

功能说明

1. 多账号会话隔离

   • 每个子窗体的 WebView2 使用不同的 UserDataFolder
   • Cookie、localStorage、登录状态完全独立
   • 同一网站可以在不同子窗体中登录不同账号

2. 三阶段初始化模式

   • Initialize Me → 创建 WebView2（不传 URL）
   • wv_Create() → 配置 UserDataFolder
   • wv_Ready() → 执行 Navigate

3. MDI 多实例架构

   • MDIForm1 作为父窗体
   • 每个子窗体独立创建 cWebView2Host 实例
   • 动态创建/销毁子窗体

4. 预创建数据目录

   • UserDir/account-default/ 等目录预先创建
   • WebView2 会在目录下创建 EBWebView 子目录
   • 包含完整的浏览器数据（Cache、Cookies、Local Storage 等）

技术要点

1. UserDataFolder 的作用：WebView2 将所有用户数据（Cookie、Cache、localStorage、Session Storage、IndexedDB 等）存储在此目录。不同目录 = 完全隔离的浏览器会话

2. wv.Initialize Me：传入 Form 对象，内部自动获取 hWnd。等效于 wv.Initialize Me.hWnd

3. wv_Create vs wv_Ready：

   • Create 在 WebView2 控件创建后立即触发，是配置环境选项的最佳时机
   • Ready 在首次导航完成后触发

4. 多实例注意：WebView2 共享同一个浏览器进程（同一 UserDataFolder），不同 UserDataFolder 会创建独立的浏览器进程

应用场景

1. 多账号管理系统（社交媒体、电商平台）
2. 并行测试不同用户角色的 Web 应用
3. 浏览器隔离的隐私浏览
4. 多租户 SaaS 应用客户端

扩展建议

1. 可以在子窗体中加入账号切换功能，通过切换 UserDataFolder 实现
2. 可以记录每个账号的 UserDataFolder 路径，实现账号持久化
3. 添加 Cookie 导出/导入功能，实现账号迁移