Blazor Server中如何在_Host.cshtml将字符串存入Session Storage？

你遇到的问题核心在于：_Host.cshtml是服务器端的Razor页面，而Session Storage是浏览器端的存储API，服务器代码无法直接操作浏览器的Session Storage，这就是为什么你之前的尝试要么报错要么读不到值。

问题原因拆解 #

• 用await调用SessionStorage.SetItemAsync时，Blazored.SessionStorage的方法需要在浏览器上下文执行，服务器端调用会导致上下文冲突，触发无明确错误的重定向。
• 不用await时，异步方法还没执行（且根本无法在服务器端完成浏览器端的存储操作）就去读取，自然返回空值。

正确解决方案 #

方案1：在Blazor组件的生命周期中处理（推荐）

把从LiteDB取数据、存Session Storage的逻辑放到Blazor组件的初始化方法里，这里是浏览器端上下文，能正常使用Blazored.SessionStorage：

@inject Blazored.SessionStorage.ISessionStorageService SessionStorage
@inject ILiteDbDataService LiteDbService // 替换成你的LiteDB数据服务

protected override async Task OnInitializedAsync()
{
    // 从LiteDB获取数据
    var homepageObj = await LiteDbService.GetHomepageDataAsync();
    // 调整判断逻辑，原代码两边都是"Working"，应为笔误
    var title = homepageObj != null ? "Working" : "Not Working";
    
    // 存入Session Storage
    await SessionStorage.SetItemAsync("Title", title);
    
    // 读取测试
    var val = await SessionStorage.GetItemAsStringAsync("Title");
    // 此时val能拿到正确值
}

如果组件是预渲染模式，第一次服务器渲染时Session Storage不存在，可改用OnAfterRenderAsync确保在浏览器端执行：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        var homepageObj = await LiteDbService.GetHomepageDataAsync();
        var title = homepageObj != null ? "Working" : "Not Working";
        await SessionStorage.SetItemAsync("Title", title);
    }
}

方案2：在_Host.cshtml中通过JS传递数据到Session Storage

如果必须在_Host.cshtml中获取LiteDB数据，可把数据渲染成浏览器端JS代码，直接存入Session Storage：

@{
    // 同步从LiteDB获取数据（_Host.cshtml为同步渲染，异步操作需避免阻塞）
    var homepageObj = YourLiteDbHelper.GetHomepageData();
    var title = homepageObj != null ? "Working" : "Not Working";
}

<!-- 浏览器加载时执行JS，存入Session Storage -->
<script>
    sessionStorage.setItem("Title", "@title");
</script>

<component type="typeof(App)" render-mode="ServerPrerendered" />

之后在Blazor组件中，用Blazored.SessionStorage读取值：

@inject Blazored.SessionStorage.ISessionStorageService SessionStorage

protected override async Task OnInitializedAsync()
{
    var val = await SessionStorage.GetItemAsStringAsync("Title");
}

注意事项 #

• 禁止在_Host.cshtml中直接调用Blazored.SessionStorage的方法，它依赖浏览器上下文，服务器端无法执行。
• 使用预渲染模式时，要区分服务器端和浏览器端的执行逻辑，避免在服务器端调用浏览器API。

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