WKWebView嵌入iFrame时localStorage数据退出应用后丢失如何解决

核心问题根因 #

• WKWebView的configuration属性在实例初始化后为只读状态，在viewDidLoad中修改配置不会生效
• 未显式指定WKWebView使用持久化网站数据存储，iFrame的存储数据会被归类为临时数据随进程销毁清空
• iFrame的sandbox权限配置缺失，导致JS存储能力被限制

可行解决方案 #

方案1：调整WKWebView初始化逻辑，提前配置持久化存储 #

必须在创建WKWebView实例前完成所有配置项设置，显式指定使用持久化数据存储，示例代码如下：

// 提前在控制器初始化或viewDidLoad最开始创建配置
let config = WKWebViewConfiguration()
// 启用持久化数据存储，这步是核心
config.websiteDataStore = WKWebsiteDataStore.default()
// 开启JS权限
config.preferences.javaScriptEnabled = true
// iOS14+需要额外开启网页JS权限
if #available(iOS 14.0, *) {
    config.defaultWebpagePreferences.allowsContentJavaScript = true
}
// 用提前配置好的config初始化webView，不要在初始化后修改配置
webView = WKWebView(frame: view.bounds, configuration: config)

override func viewDidLoad() {
    super.viewDidLoad()
    guard let url = URL(string: "https://example.com") else {
        return
    }
    view.addSubview(webView)
    webView.load(URLRequest(url: url))
}

方案2：补全iFrame的sandbox属性配置 #

单独设置allow-same-origin无法支持JS操作存储，需要同步添加allow-scripts权限：

<iframe src="子页面路径" sandbox="allow-same-origin allow-scripts"></iframe>

方案3：兜底跨端同步方案 #

如果以上配置仍不生效，可以通过原生与JS交互实现存储持久化：

1. 页面加载完成后，通过JS注入读取iFrame的localStorage全量数据，存入原生UserDefaults或Keychain
2. 每次iFrame加载完成时，将原生存储的内容通过JS注入写入iFrame的localStorage
3. 监听H5的storage事件，实时同步存储变更到原生侧

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