Blazor .Net 服务器端在哪里加载 LocalStorage 数据

Question

我在 .NET Core 3.0 上使用 Blazor Preview 9 服务器端以及用于在浏览器的本地存储中加载和保存数据的 nuget 包 Blazored.LocalStorage。

现在我想在加载应用程序时在需要时加载它一次。

为此，我需要使用 OnFirstRenderer，因为它必须完全位于客户端才能访问它的浏览器缓存。现在我使用页面“/”（Index.razor），但我不太确定这是否是正确的锚点或执行此操作的方法：

[Parameter]
public string Test { get; set; }

protected async override Task OnAfterRenderAsync(bool firstRender)
{
    try
    {
        if (firstRender)
        {
            await localStorage.SetItemAsync("TEST", "Hallo Welt");
        }

        if (Test == null)
        {
            Test = await localStorage.GetItemAsync<string>("TEST");
            StateHasChanged();
        }            
    }
    catch (Exception ex)
    {
        throw;
    }
}

此外，我不知道如何使其适用于所有组件：

使用全局变量创建服务并将其注入每个组件或通过 CascadingValue 方法执行它是最好的方法吗？

谢谢！

Answer 1

OnAfterRender现在仅在组件初始化时调用并且您可以执行 JS 互操作（此后每次重新渲染组件时都会调用它 - 但 firstRender 将为 false）。因此，如果您只想从本地存储加载一次值，您可以firstRender按照下面的示例进行操作。

[Parameter]
public string Test { get; set; }

protected async override Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        Test = await localStorage.GetItemAsync<string>("TEST");
    }         
}

在使所有组件都可以使用该值方面，您可以使用全局状态类或通过级联参数提供它。任何一个选项都可以工作，我真的不认为一个比另一个更好，我想说的是，如果您需要将其他位保持在状态中，则使用状态类，如果不这样做，则可能使用级联参数.

根据 Magoo 先生的评论 - 最好在 App.razor 组件中执行此操作，以便即使在深层链接场景中也可以加载它。