Blazor页面加载先于LocalStorage执行，无法自动刷新数据

核心原因 #

Blazor中LocalStorage依赖JavaScript互操作，Server模式下初始渲染阶段JS运行时还未完全就绪；WebAssembly模式下如果异步读取后未主动触发UI更新，也会导致数据无法及时显示。

可行解决方案 #

方案1：利用OnAfterRenderAsync配合首次渲染判断

这是最稳妥的实现方式，组件首次渲染完成后（此时JS环境已就绪）读取LocalStorage，再主动触发UI刷新：

@inject ILocalStorageService LocalStorage
@* 这里以Blazored.LocalStorage为例，自定义JS互操作逻辑也适用 *@

<p>存储的值：@storedValue</p>

@code {
    private string storedValue;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 读取LocalStorage中指定键的值
            storedValue = await LocalStorage.GetItemAsStringAsync("your-storage-key");
            // 手动触发UI刷新，确保读取的值能显示
            StateHasChanged();
        }
        await base.OnAfterRenderAsync(firstRender);
    }
}

方案2：WebAssembly模式下优化初始化流程

如果是Blazor WebAssembly项目，可直接在OnInitializedAsync中读取，多数情况下Blazor会自动处理UI更新，特殊场景下可手动调用StateHasChanged()：

@inject ILocalStorageService LocalStorage

<p>存储的值：@storedValue</p>

@code {
    private string storedValue;

    protected override async Task OnInitializedAsync()
    {
        storedValue = await LocalStorage.GetItemAsStringAsync("your-storage-key");
        // 若UI未自动刷新，取消下方注释手动触发
        // StateHasChanged();
        await base.OnInitializedAsync();
    }
}

注意事项

• 若未使用第三方库，需自己实现JS互操作：注入IJSRuntime，通过InvokeAsync<string>("localStorage.getItem", "your-key")读取值。
• Server模式下禁止在OnInitializedAsync中直接调用JS互操作，此时客户端JS环境尚未加载完成，会抛出异常。

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