如何在Blazor中访问浏览器localStorage？

Posted 2021-03-28

我想支持JWT，所以我需要保留令牌;是否有一些设施可以访问这个？或者我们现在应该注册我们自己的javascript函数来访问此功能？

编辑：根据建议，我尝试使用JS interop：

<script>
    localStorage.setItem("key1", "key1data");
    Blazor.registerFunction("readStorage", (key) => {
        return localStorage.getItem(key);
    });
</script>
@if (jwtKey == null)
{
<div class="login-panel">
    <p>JWT not loaded</p>
</div>
}
else
{
<div class="login-panel">
    <p>@jwtKey</p>
</div>
}

@functions {
    public RenderFragment Body { get; set; }
    string jwtKey;

    protected override async Task OnInitAsync()
    {
        jwtKey = RegisteredFunction.Invoke<string>("readStorage", "key1");
        if (jwtKey == null)
        {
            jwtKey = "Unknown";
        }
    }
}

但是这导致了diag中的WASM错误：

WASM：[Microsoft.AspNetCore.Blazor.Browser.Interop.JavaScriptException]找不到名为'readStorage'的注册函数。 WASM：错误：找不到名为'readStorage'的注册函数。

仅供参考，这是Blazor VS样板项目的MainLayout.cshtml。

（如果合适，可以提出一个新的问题;虽然有点与此相关）

答案

对于0.1，您需要编写自己的javascript互操作。但我相信这是有效的，也许在0.2版本中。

或者（如果您不需要在会话之间存储），您可以编写自己的DI单例，就像这里完成的那样：https://github.com/aspnet/samples/blob/master/samples/aspnetcore/blazor/FlightFinder/FlightFinder.Client/Services/AppState.cs

编辑 有一个公开的PR，所以确实应该很快就会出现：https://github.com/aspnet/Blazor/pull/205

Edit2 0.2已完成，但还没有localstorage。与此同时，我为此开发了一个包：BlazorExtensions也在nuget上

另一答案

它可能默认实现为Blazor，但现在我正在使用：Nuget - BlazorStorage

另一答案

如果其他人正在努力解决这个问题（截至2018年7月6日）：Steve Sanderson在他的NDC会议视频中解决了这个问题（本地存储）：qazxsw poi从大约45分左右开始。

他为此使用了一个nuget包：https://www.youtube.com/watch?v=JU-6pAxqAa4页面上的用法示例，所以不需要在这里重新编写。