如何从Blazor Server的ProtectedLocalStorage中获取数据

你遇到的空值问题，核心原因是没正确处理异步操作。ProtectedLocalStorage的SetAsync、DeleteAsync、GetAsync都是异步方法，返回Task或Task<T>，你直接调用而不等待操作完成，会导致存储操作还没执行完就去获取，或者把Task对象直接转成字符串（而非实际存储的值）。

以下是修正后的完整代码：

@page "/login"
@inject ProtectedLocalStorage storage

<button @onclick="@StoreValueAsync">set session data</button>
<button @onclick="@RemoveValueAsync">remove session data</button>
<button @onclick="@GetValueAsync">get values</button>

@testString

@code {
    private string? testString = "teststring";

    // 异步存储：用await确保写入完成
    public async Task StoreValueAsync()
    {
        await storage.SetAsync("username", "user");
        await storage.SetAsync("password", "pass");
    }

    // 异步删除：用await确保删除完成
    public async Task RemoveValueAsync()
    {
        await storage.DeleteAsync("username");
        await storage.DeleteAsync("password");
    }

    // 异步获取：正确读取存储的实际值
    public async Task GetValueAsync()
    {
        // 获取结果对象，先判断操作是否成功
        var userResult = await storage.GetAsync<string>("username");
        string? user = userResult.Success ? userResult.Value : null;

        var passResult = await storage.GetAsync<string>("password");
        string? pass = passResult.Success ? passResult.Value : null;

        testString = user != null 
            ? $"{user} and user is not null" 
            : $"user is null, pass: {pass ?? "null"}";
        
        // 显式通知UI更新（Blazor通常自动处理，复杂场景下显式调用更稳妥）
        StateHasChanged();
    }
}

关键修改说明：

• 所有操作方法改为async Task返回类型，Blazor的事件处理方法天然支持异步
• 调用ProtectedLocalStorage的异步方法必须加await，确保操作执行完成后再走后续逻辑
• GetAsync<T>返回ProtectedBrowserStorageResult<T>，要先通过Success判断操作是否成功，再取Value属性获取实际存储值
• 移除了组件内的完整HTML结构（!doctype、head、body），Blazor组件会被渲染到宿主页面中，重复写这些会导致HTML结构错误

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