Blazor Server端如何通过Blazored LocalStorage正确读取本地存储值？

你的核心问题是错误处理了异步方法的返回值，以及在同步上下文（比如属性getter）中调用异步操作导致的读取失败：

1. GetStoreValue中直接对GetItemAsync<string>()调用ToString()，得到的是Task<string>对象的字符串表示，而非本地存储的实际值，自然无法正确解析。
2. SetStoreValue中调用异步存储方法却没有await，可能导致写入操作未完成就更新变量，引发数据不一致。
3. 在属性getter中执行异步操作本身不符合Blazor的生命周期逻辑，因为getter是同步执行的，无法等待异步任务完成。

正确的实现步骤 #

1. 调整组件初始化逻辑，在异步生命周期方法中读取存储值

Blazor组件提供了OnInitializedAsync异步生命周期方法，适合用来执行初始化阶段的异步操作：

@inject ILocalStorageService _storage

@code {
    private int _store;
    // 组件初始化默认值
    private int _storeValue = 1;

    protected override async Task OnInitializedAsync()
    {
        // 异步读取本地存储，用int?判断键是否存在
        var storedValue = await _storage.GetItemAsync<int?>("UserListSelectedStore");
        // 如果存储值不存在，使用默认值
        _store = storedValue ?? _storeValue;
        _storeValue = _store;
    }
}

2. 异步处理下拉框值的保存

推荐使用@bind:after来绑定下拉框值变更后的异步保存逻辑，比在属性setter中处理更清晰：

<!-- 下拉框绑定 -->
<select @bind="_store" @bind:after="SaveSelectedStoreAsync">
    <option value="1">商店1</option>
    <option value="2">商店2</option>
    <option value="3">商店3</option>
</select>

对应的异步保存方法：

private async Task SaveSelectedStoreAsync()
{
    await _storage.SetItemAsync("UserListSelectedStore", _store);
    _storeValue = _store;
}

替代方案：使用属性setter异步保存

如果你更倾向于用属性setter处理，可以在setter中触发异步保存（注意不要阻塞UI）：

private int _store
{
    get => _storeValue;
    set
    {
        if (_storeValue != value)
        {
            _storeValue = value;
            // 后台异步执行保存，不阻塞UI线程
            _ = SaveSelectedStoreAsync(value);
        }
    }
}

private async Task SaveSelectedStoreAsync(int value)
{
    await _storage.SetItemAsync("UserListSelectedStore", value);
}

关键注意事项 #

• 确保已在Program.cs中注册Blazored LocalStorage服务：

  builder.Services.AddBlazoredLocalStorage();
  

• Blazor Server中本地存储依赖JS互操作，所有读写操作必须异步执行，不能在同步方法中直接调用异步API而不等待。
• 使用可空类型（如int?）读取存储值，可以直接判断键是否存在，避免空字符串解析错误。

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