Blazor组件中表单提交后如何设置Local Storage项？

问题根源 #

1. 初始错误是因为Login组件默认静态渲染，静态渲染阶段无法执行JavaScript互操作（LocalStorage依赖JS），只能在OnAfterRenderAsync生命周期方法中调用。
2. 添加InteractiveServerRenderMode(prerender: false)后，登录成功后先调用RedirectManager.RedirectTo启动了响应，此时再执行LocalStorage的JS互操作，会触发"Headers are read-only"异常——因为响应已经开始发送，无法再发起SignalR的JS调用。

可行解决方案 #

方案一：跳转后在目标页面设置LocalStorage #

登录成功后先跳转，在目标页面的OnAfterRenderAsync中完成LocalStorage设置（该方法是组件渲染完成后执行，此时JS环境已就绪）。

1. 修改Login.razor的登录方法，跳转时携带登录标记：

public async Task LoginUser() {
  SignInResult result = await SignInManager.PasswordSignInAsync(Input.Email, Input.Password, Input.RememberMe, lockoutOnFailure: false);
  if (result.Succeeded) {
    // 通过查询参数标记刚登录
    var targetUrl = string.IsNullOrEmpty(ReturnUrl) ? "/" : ReturnUrl;
    RedirectManager.RedirectTo($"{targetUrl}?justLoggedIn=true");
  }
}

2. 在目标页面（如Home.razor）添加逻辑：

@inject Blazored.LocalStorage.ILocalStorageService LocalStorage
@inject NavigationManager NavManager

@code {
  protected override async Task OnAfterRenderAsync(bool firstRender)
  {
    if (firstRender)
    {
      var uri = new Uri(NavManager.Uri);
      var justLoggedIn = uri.Query.Contains("justLoggedIn=true");
      if (justLoggedIn)
      {
        await LocalStorage.SetItemAsStringAsync("Greeting", "Hello");
        // 移除查询参数，避免刷新重复执行
        NavManager.NavigateTo(NavManager.BaseUri, replace: true);
      }
    }
    await base.OnAfterRenderAsync(firstRender);
  }
}

方案二：通过Session传递状态，在交互式布局中设置LocalStorage #

利用服务器端Session存储登录标记，在全局交互式布局组件中检查标记并完成LocalStorage设置。

1. 启用Session支持：在Program.cs中添加：

builder.Services.AddSession();
// ...
app.UseSession(); // 放在UseRouting之前

2. 修改Login.razor的登录方法，设置Session标记：

@inject IHttpContextAccessor HttpContextAccessor

public async Task LoginUser() {
  SignInResult result = await SignInManager.PasswordSignInAsync(Input.Email, Input.Password, Input.RememberMe, lockoutOnFailure: false);
  if (result.Succeeded) {
    HttpContextAccessor.HttpContext.Session.SetString("NeedSetGreeting", "true");
    RedirectManager.RedirectTo(ReturnUrl);
  }
}

3. 在交互式布局组件（如MainLayout.razor）中处理：

@inject Blazored.LocalStorage.ILocalStorageService LocalStorage
@inject IHttpContextAccessor HttpContextAccessor
@rendermode InteractiveServer

@code {
  protected override async Task OnAfterRenderAsync(bool firstRender)
  {
    var needSet = HttpContextAccessor.HttpContext.Session.GetString("NeedSetGreeting");
    if (!string.IsNullOrEmpty(needSet))
    {
      await LocalStorage.SetItemAsStringAsync("Greeting", "Hello");
      HttpContextAccessor.HttpContext.Session.Remove("NeedSetGreeting");
    }
    await base.OnAfterRenderAsync(firstRender);
  }
}

方案三：使用Interactive Auto模式并延迟JS调用（不推荐） #

如果坚持在Login组件内处理，可切换到InteractiveAutoRenderMode，并确保JS调用在响应启动前完成，但此方法稳定性较差：

@rendermode InteractiveAuto

@inject Blazored.LocalStorage.ILocalStorageService LocalStorage

@code {
  public async Task LoginUser() {
    SignInResult result = await SignInManager.PasswordSignInAsync(Input.Email, Input.Password, Input.RememberMe, lockoutOnFailure: false);
    if (result.Succeeded) {
      // 先执行LocalStorage操作，再跳转
      await LocalStorage.SetItemAsStringAsync("Greeting", "Hello");
      // 延迟跳转确保JS操作完成
      await Task.Delay(100);
      RedirectManager.RedirectTo(ReturnUrl);
    }
  }
}

注意：此方法依赖延迟时间，可能因网络或性能问题失效，优先推荐前两个方案。

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