时间戳

首页 > 解决方案 > Blazored 本地存储仅适用于第一页渲染

local-storage - Blazored 本地存储仅适用于第一页渲染

问题描述

我有一种方法用于在浏览器上存储用户信息，如下所示：

protected async Task AddToStorage(string key, string value)
{
   await localStorageService.SetItemAsync(key, value);
}

这就是我注入存储的方式

 [Inject]
Blazored.LocalStorage.ILocalStorageService localStorageService { get; set; }

检索用户信息后，此处调用 AddToStorage 方法：

 protected async Task LoginMethod()
{
    try
    {
        authResult = await AuthenticationService.Login(new Models.Dtos.Requests.UserLoginRequest()
        {
            Email = Email,
            Password = Password
        });
        Token = authResult.Token;
        await AddToStorage("UserToken", Token);
        navigationManager.NavigateTo("/");

    }
    catch (Exception)
    {

    }
}

但我没有向浏览器本地存储添加任何内容，经过一些测试，我发现它只能在“OnAfterRenderASync”方法内部工作。

标签： local-storageblazorblazor-server-side

解决方案

您可以尝试使用这个Nuget 包。它应该可以多次工作...查看文档和演示以获取更多详细信息。

非常重要的注意事项：WASM 不能直接访问 HTML DOM 或 API（如 Storage API）。所以所有这些扩展都是使用JsInterop实现的。Blazor 支持许多托管模型。您可以将其作为WASM SPA应用程序或使用 SignalR 的服务器托管和呈现的应用程序运行。对于 WASM 应用程序IJSRuntime，服务可以在代码执行的任何时候注入和使用，甚至OnInitialized()等等。但是对于服务器端 Blazor ，只有在组件渲染后才能IJSRuntime在任何时候使用/访问！

因此，如果您有 Blazor 服务器项目，请尝试在您的组件已呈现后调用第 3 方“JsInterop-ing”服务。这将是IJSRuntime在任何 Blazor 服务器应用程序中使用服务的所有扩展的一个常见警告。

推荐阅读