WinForms内嵌HTML/JS应用无外部依赖本地数据访问方案问询

Great question! When embedding an HTML/JS app inside a WinForms app via either the legacy WebBrowser control (based on IE) or the modern WebView2 control (based on Edge Chromium), you have a few reliable ways to access local data without relying on any external resources. Let’s break down the best options:

1. .NET-JavaScript Interop (The Most Flexible Approach) #

This is the go-to method if you need to access local databases, files, or any WinForms-level data directly from your HTML/JS app. The idea is to expose a .NET class to the browser control, which your JS code can call to read/write local data.

Example with WebView2 (Recommended for Modern JS Support) #

First, create a .NET class that handles local data operations (e.g., SQLite database access):

using Microsoft.Data.Sqlite;

public class LocalDataHandler
{
    // Read data from a local SQLite database
    public string FetchData(string key)
    {
        using var connection = new SqliteConnection("Data Source=local_app_data.db");
        connection.Open();
        
        var command = new SqliteCommand(
            "SELECT value FROM app_settings WHERE setting_key = @key", 
            connection
        );
        command.Parameters.AddWithValue("@key", key);
        
        return command.ExecuteScalar()?.ToString() ?? string.Empty;
    }

    // Save data to the local SQLite database
    public void StoreData(string key, string value)
    {
        using var connection = new SqliteConnection("Data Source=local_app_data.db");
        connection.Open();
        
        var command = new SqliteCommand(
            "REPLACE INTO app_settings (setting_key, value) VALUES (@key, @value)", 
            connection
        );
        command.Parameters.AddWithValue("@key", key);
        command.Parameters.AddWithValue("@value", value);
        
        command.ExecuteNonQuery();
    }
}

Next, register this class with your WebView2 control so JS can access it:

private async void WebView21_CoreWebView2InitializationCompleted(
    object sender, 
    CoreWebView2InitializationCompletedEventArgs e
)
{
    // Expose the LocalDataHandler to JS under the name "localData"
    webView21.CoreWebView2.AddHostObjectToScript("localData", new LocalDataHandler());
}

Now call these methods from your JS code:

// Fetch data from local database
async function getSetting(key) {
    const dataHandler = window.chrome.webview.hostObjects.localData;
    return await dataHandler.FetchData(key);
}

// Save data to local database
async function saveSetting(key, value) {
    const dataHandler = window.chrome.webview.hostObjects.localData;
    await dataHandler.StoreData(key, value);
}

// Usage example
saveSetting("theme", "dark").then(() => {
    getSetting("theme").then(theme => console.log(`Current theme: ${theme}`));
});

Notes for WebBrowser Control (Legacy IE) #

If you’re stuck using the old WebBrowser control, you can use ObjectForScripting instead:

// Set the object for JS to access
webBrowser1.ObjectForScripting = new LocalDataHandler();

Then call it from JS like this:

// Note: No async needed here (WebBrowser uses sync calls)
const theme = window.external.FetchData("theme");
window.external.StoreData("theme", "light");

2. HTML5 LocalStorage/SessionStorage (For Isolated JS Data) #

If you only need to store small amounts of data that’s exclusive to the HTML/JS app (no need to share with WinForms), use HTML5’s built-in localStorage or sessionStorage. This is entirely contained within the browser control and requires no extra setup.

// Store data (persists across browser sessions)
localStorage.setItem("user_preference", "auto_save");

// Retrieve data
const pref = localStorage.getItem("user_preference");

// Delete data
localStorage.removeItem("user_preference");

Limitations: Storage is limited to ~5MB, data is isolated from WinForms, and it’s only accessible to the embedded HTML/JS app.

3. Local File Access (With User Interaction) #

WebView2 supports the File System Access API, which lets JS read/write local files—though this requires user interaction (e.g., selecting a file via a dialog) unless you configure special permissions. This is useful if you need users to manually pick files to work with.

async function readLocalTextFile() {
    const [fileHandle] = await window.showOpenFilePicker({
        types: [{ description: "Text Files", accept: { "text/plain": [".txt"] } }]
    });
    const file = await fileHandle.getFile();
    return await file.text();
}

async function saveTextToFile(content) {
    const fileHandle = await window.showSaveFilePicker({
        suggestedName: "output.txt",
        types: [{ description: "Text Files", accept: { "text/plain": [".txt"] } }]
    });
    const writable = await fileHandle.createWritable();
    await writable.write(content);
    await writable.close();
}

Final Recommendations #

• Use .NET-JS Interop if you need to access shared local data (databases, files) between WinForms and HTML/JS, or need full control over local resources.
• Use LocalStorage for small, isolated JS-only data.
• Use File System Access only when you need user-initiated file operations.

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