Maui Hybrid(.NET 8.0)页面切换时如何持久化页面状态？

当从其他页面返回时，Blazor页面无法保留状态，这会给用户带来糟糕的使用体验，以下是几种实现页面状态保留的可行方案：

• 使用本地存储（LocalStorage/SessionStorage）
  在组件的OnInitializedAsync或OnParametersSetAsync方法中读取存储的状态，在状态变更时（比如表单输入、数据修改）将状态序列化后存入本地存储。示例代码：

  // 保存状态
  await JS.InvokeVoidAsync("localStorage.setItem", "PageState", JsonSerializer.Serialize(yourStateObject));
  
  // 读取状态
  var stateJson = await JS.InvokeAsync<string>("localStorage.getItem", "PageState");
  if (!string.IsNullOrEmpty(stateJson))
  {
      yourStateObject = JsonSerializer.Deserialize<YourStateType>(stateJson);
  }
  

  SessionStorage会在浏览器关闭时清除，LocalStorage会持久保存，可根据需求选择。

• 利用路由参数传递状态
  将关键状态数据序列化后作为路由参数的一部分，导航时携带参数，返回原页面时解析参数恢复状态。示例：

  // 导航时携带状态
  NavigationManager.NavigateTo($"/otherpage?state={Uri.EscapeDataString(JsonSerializer.Serialize(yourState))}");
  

  在原页面的OnParametersSetAsync方法中读取并解析路由参数，恢复状态。

• 使用组件状态容器
  创建一个状态容器类，通过依赖注入注入到组件中，将需要保留的状态存储在容器内。即使组件被销毁重建，只要容器实例存在，状态就能保留。示例：

  // 状态容器类
  public class PageStateContainer
  {
      public YourStateType CurrentState { get; set; }
      public event Action OnStateChanged;
      public void UpdateState(YourStateType newState)
      {
          CurrentState = newState;
          OnStateChanged?.Invoke();
      }
  }
  
  // 注册为Scoped服务
  builder.Services.AddScoped<PageStateContainer>();
  
  // 组件中使用
  [Inject]
  private PageStateContainer StateContainer { get; set; }
  
  // 保存状态
  StateContainer.UpdateState(yourCurrentState);
  
  // 恢复状态
  yourCurrentState = StateContainer.CurrentState;
  

• 使用KeepAlive组件（仅Blazor Server）
  用KeepAlive包裹需要保留状态的页面组件，导航离开时组件不会被销毁，返回时直接复用实例，状态自然保留。用法：

  <KeepAlive>
      @* 页面内容 *@
  </KeepAlive>
  

  注意该特性仅适用于Blazor Server，需注意内存占用，避免滥用。

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