iOS中WKWebView加载的HTML表单离线保存与更新问题求助

Hey there! Let’s work through this problem where your saved HTML form isn’t retaining user inputs when opened offline. The root issue here is that the original HTML data you’re saving doesn’t include the edits users made—those values live in the WKWebView’s runtime DOM, not the initial static HTML. Here’s how to fix this step by step:

1. Capture the Live HTML with User Inputs #

Instead of saving the original HTML data, you need to grab the current state of the web page’s DOM (which includes all filled form fields). Use WKWebView’s evaluateJavaScript method to pull the updated HTML:

// Call this when you want to save the form (e.g., on a "Save" button tap)
[yourWKWebView evaluateJavaScript:@"document.documentElement.outerHTML" completionHandler:^(id _Nullable result, NSError * _Nullable error) {
    if (error) {
        NSLog(@"Failed to fetch updated form HTML: %@", error.localizedDescription);
        return;
    }

    // Convert the retrieved HTML string to data
    NSString *updatedHTML = result;
    NSData *htmlData = [updatedHTML dataUsingEncoding:NSUTF8StringEncoding];

    // Get the documents directory path
    NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
    NSString *documentsDirectory = [paths firstObject];

    // Clean up the filename to avoid invalid characters
    NSString *sanitizedFormTitle = [FormTitle stringByReplacingOccurrencesOfString:@"[^a-zA-Z0-9_.-]" 
                                                                       withString:@"" 
                                                                          options:NSRegularExpressionSearch 
                                                                            range:NSMakeRange(0, FormTitle.length)];
    NSString *fileName = [NSString stringWithFormat:@"%.0f_%@.html", RecordId, sanitizedFormTitle];
    NSString *htmlFilePath = [documentsDirectory stringByAppendingPathComponent:fileName];

    // Save the updated HTML data
    BOOL saveSuccess = [htmlData writeToFile:htmlFilePath atomically:YES];
    if (saveSuccess) {
        NSLog(@"Form saved successfully at: %@", htmlFilePath);
    } else {
        NSLog(@"Failed to save the form—check file permissions or path validity");
    }
}];

This snippet fetches the full, live HTML of the page (including filled input values, selected dropdown options, etc.) and saves that instead of the original static file.

2. Load the Saved Form for Offline Editing #

When you need to open the saved form later, load the local HTML file into your WKWebView. Make sure to configure the web view to allow local file access:

// First, create a web view configuration that allows local file access
WKWebViewConfiguration *webConfig = [[WKWebViewConfiguration alloc] init];
webConfig.preferences[@"allowFileAccessFromFileURLs"] = @YES;

// Initialize your WKWebView with this configuration
WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:webConfig];

// Load the saved HTML file
NSString *documentsDirectory = [NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) firstObject];
NSString *fileName = @"YOUR_SAVED_FILENAME.html"; // Replace with your actual filename
NSString *htmlFilePath = [documentsDirectory stringByAppendingPathComponent:fileName];
NSURL *localFileURL = [NSURL fileURLWithPath:htmlFilePath];

[webView loadRequest:[NSURLRequest requestWithURL:localFileURL]];

Once the form is loaded, users can edit it again—just repeat the evaluateJavaScript save flow when they’re done to update the file.

3. Fix Common Edge Cases #

• Filename Sanitization: Your original code uses %f for RecordId (which may add decimal points) and doesn’t clean up FormTitle. The snippet above removes invalid characters from the title and uses %.0f to format RecordId as an integer, avoiding broken file paths.
• Encoding: Using NSUTF8StringEncoding ensures special characters in the form are saved correctly.
• Error Handling: The code adds detailed logs for failures, making it easier to debug issues like missing directory permissions or invalid paths.

By capturing the live DOM state instead of static HTML, you’ll ensure all user inputs are preserved in the saved file. When reloading, the web view will render the form exactly as it was saved, and you can repeat the process to update it again.

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