如何在无交互的.NET 8 Blazor SSR中访问浏览器会话存储？

我正在使用无交互的Blazor SSR，需要在每个页面初始化阶段读取浏览器会话存储（Session Storage）。我尝试使用NuGet包Blazored.SessionStorage，但它需要启用交互性；也尝试过HttpContext.Session.GetString方法，但未能成功实现。请问有可行的解决方案吗？

测试代码：

//--- Test HttpContext - Fail 
private async Task Test1()
 {
 HttpContext.Session.GetString("testKey");
 }


//--- Test NuGet Blazored.SessionStorage - Fail 
 private async Task Test2()
 {
     await sessionStorage.SetItemAsync("name", "John Smith");
     var name = await sessionStorage.GetItemAsync<string>("name");
 }

Blazor SSR是服务器端渲染，页面初始化阶段完全在服务器上执行，根本无法直接访问浏览器的Session Storage（这是浏览器端专属的存储机制）。而HttpContext.Session是服务器端的会话存储，和浏览器的Session Storage完全是两个独立的东西，所以你之前的尝试都会失败。以下是两种可行的解决思路：

思路1：客户端读取后传递给服务器 #

在页面加载时通过JavaScript读取浏览器Session Storage的数据，再将数据传递到服务器，供Blazor SSR页面使用：

• 在页面的静态HTML部分（比如_Host.cshtml或对应页面的静态渲染区域）添加JavaScript代码，读取Session Storage并通过URL参数传递数据：

  window.onload = function() {
      const targetKey = 'testKey';
      const sessionValue = sessionStorage.getItem(targetKey);
      if (sessionValue) {
          // 通过URL参数传递数据到当前页面
          const url = new URL(window.location.href);
          url.searchParams.set(targetKey, sessionValue);
          // 仅当参数未存在时跳转，避免无限循环
          if (url.searchParams.get(targetKey) !== sessionValue) {
              window.location.href = url.toString();
          }
      }
  };
  

• 在Blazor页面中通过NavigationManager获取URL参数：

  [Inject]
  public NavigationManager NavigationManager { get; set; }
  
  protected override void OnInitialized()
  {
      var uri = new Uri(NavigationManager.Uri);
      var sessionData = uri.Query.Split('&')
          .FirstOrDefault(q => q.StartsWith("testKey="))?
          .Split('=')[1];
      // 处理获取到的sessionData
  }
  

思路2：启用局部交互性 #

无需全站点开启交互模式，仅给需要读取Session Storage的页面或组件启用交互式渲染模式，这样就能正常使用Blazored.SessionStorage：

• 在目标页面组件顶部添加渲染模式指令：

  @page "/your-target-page"
  @rendermode InteractiveServer
  @inject Blazored.SessionStorage.ISessionStorageService sessionStorage
  
  @code {
      protected override async Task OnInitializedAsync()
      {
          var name = await sessionStorage.GetItemAsync<string>("name");
          // 处理读取到的数据
      }
  }
  

注意事项 #

• 服务器端永远无法直接访问浏览器的Session Storage，必须通过客户端中转数据。
• 如果传递敏感数据，不要用URL参数，建议通过加密的AJAX请求或隐藏表单提交，避免数据泄露。

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