如何读取/编辑 CefSharp 本地存储

Question

我正在使用CefSharp.Wpf在WPF中显示我的Angular SPA。

我的身份验证基于 JWT 令牌，这些令牌存储在浏览器本地存储中。我调用带有CefSharp的对话框并登录（将JWT保存在本地存储中）。

然后，我希望我的 c# 应用能够对 API 的受保护资源进行 api 调用。为此，我需要从本地存储中检索令牌并将其添加到请求标头中。

但是我找不到使用客户端 c# 代码从本地存储获取数据的方法。 我该如何实现？

Answer 1

CEF没有

为此提供任何API，因此您可以使用JS或使用sqlLite在磁盘上处理.localstorage文件。

我已经通过调用JS代码实现了对LocalStorage的操作。这篇文章帮助很大：https://blog.logrocket.com/the-complete-guide-to-using-localstorage-in-javascript-apps-ba44edb53a36/

就我而言

var _browser = new ChromiumWebBrowser();

JS包装器：

public void RunJavascript(string script)
{ //semicolumn at the end is not needed, multiple semicolons don't cause error
   _browser.GetMainFrame().ExecuteJavaScriptAsync(script);
}
public dynamic RunEvaluateJavascript(string script)
{
    string scriptTemplate = @"(function () {
                                return " + script + ";" +
                            "})();";
    Task<JavascriptResponse> t = _browser.GetMainFrame().EvaluateScriptAsync(scriptTemplate);
    t.Wait();
    return t.Result.Result;
}
public string RunEvaluateJavascriptToString(string script)
{
    var res = RunEvaluateJavascript(script);
    return res == null ? null : res.ToString();
}

本地存储功能：

public Dictionary<string, string> GetAllLocalStorageVariables()
{
    dynamic res = RunEvaluateJavascript("{ ...localStorage };");
    Dictionary<string, string> dictRes = null;
    try
    {
        var dictTmp = new Dictionary<string, object>(res);
        dictRes = dictTmp.ToDictionary(k => k.Key, k => k.Value.ToString());
    }
    catch
    {
        return null;
    }
    return dictRes;
}
public string GetLocalStorageValue(string key)
{
    return RunEvaluateJavascriptToString($"window.localStorage.getItem('{key}');");
}
public void SetLocalStorageVariable(string key, string value)
{
    RunJavascript($"window.localStorage.setItem('{key}', '{value}');");
}
public void ClearLocalStorage()
{
    RunJavascript("window.localStorage.clear();");
}
public void RemoveLocalStorageKey(string key)
{
    RunJavascript($"window.localStorage.removeItem('{key}');");
}

Answer 2

我也遇到了这个问题，这是我研究的结果.
首先，CEF不提供这样的 API .
但是我们可以使用 JavaScript 对象绑定来实现这个函数.
步骤 1：在 C# 中注册一个 JavaScript 对象，如下所示：

JavascriptObjectRepository.Register("localStorage_hook", LocalStorage);

实现存储的一些方法，例如

public object GetItem (string host, string key);

setp 2：在javascript中 删除原始的localStorage对象，如下所示：

cefSharp.deleteBoundObject ('localStorage');

并绑定我们的对象

cefSharp.bindObjectAsync('localStorage_hook');

集合 3：在 javascrti 中创建一个 Proxy 对象来传输和实现 localStorage 的属性和方法，如下所示：

localStorage = new Proxy({ 
    get length() { return localStorage_hook.getItemsCount(location.origin); },
    key: function (idx) { return localStorage_hook.getKey(location.origin, idx); },
    getItem: function (key) {return localStorage_hook.getItem(location.origin, key);},
    setItem: function (key, value) {return localStorage_hook.setItem(location.origin, key, value);},
    removeItem: function (key) {return localStorage_hook.removeItem(location.origin, key);},
    clear: function () {return localStorage_hook.clearItems(location.origin);}
    },
    {
        get(obj, name) {
            if (obj[name]) {
                return obj[name];
            } else {
                return obj.getItem(name);
            }
        },
        set(obj, name, value) {
            obj.setItem(name, value);
        }
    });