Blazor应用跨页面组件共享全局对象：SessionStorage还是StateManager？

Hey Jon, great question—this is a super common scenario in Blazor apps, and the answer really depends on your specific requirements for the CUSTOMER object. Let me break down both approaches clearly so you can pick the best fit:

• What it does: Stores your CUSTOMER object in the browser's session storage, which persists as long as the browser tab is open (it gets cleared when the tab closes). You'll serialize the object to JSON for storage, then deserialize it when accessing across pages/components.
• Pros:
  • Built-in Blazor support, so you don’t need to write tons of custom code from scratch.
  • Automatically retains data across page reloads within the same session.
  • Works for both Blazor Server and WebAssembly (implementation details differ slightly but are well-documented).
• Cons:
  • Only handles serializable data—if your CUSTOMER has complex references or non-serializable properties, you’ll need to manually adjust those before storage.
  • No real-time sync: If one component updates the CUSTOMER in SessionStorage, other components won’t automatically pick up the change unless you add extra logic like polling or event triggers.
  • Limited to session scope—if you need data to survive browser restarts, you’d switch to LocalStorage, but that introduces security risks for sensitive customer data.
• Quick code example:

  // Inject session storage service (use Blazored.SessionStorage for simplified handling)
  private async Task SaveCustomer(Customer customer)
  {
      await _sessionStorage.SetItemAsync("currentCustomer", customer);
  }
  
  private async Task<Customer> LoadCustomer()
  {
      return await _sessionStorage.GetItemAsync<Customer>("currentCustomer") ?? new Customer();
  }
  

• What it does: Creates a scoped (or singleton, based on your needs) service that holds the CUSTOMER object in memory, and triggers updates for components whenever the state changes. This is in-memory state management tailored to your app.
• Pros:
  • Real-time reactivity: Implement INotifyPropertyChanged or custom events to make components re-render instantly when the CUSTOMER object is updated. All dependent components see changes immediately.
  • Handles complex objects seamlessly—no serialization needed since the object lives in memory.
  • Full control over state logic: Add validation, business rules, or helper methods directly in the service to manage the CUSTOMER object consistently.
• Cons:
  • Doesn’t persist across page reloads or session ends by default—if the user refreshes the browser, in-memory state is lost. You’ll need to pair it with SessionStorage/LocalStorage if persistence is required.
  • Requires writing custom code (though it’s usually straightforward and lightweight).
• Quick code example:

  // Scoped state manager service
  public class CustomerStateManager
  {
      private Customer _currentCustomer;
      public event Action OnStateChanged;
  
      public Customer CurrentCustomer
      {
          get => _currentCustomer;
          set
          {
              _currentCustomer = value;
              NotifyStateChanged();
          }
      }
  
      private void NotifyStateChanged() => OnStateChanged?.Invoke();
  }
  
  // Register in Program.cs (Blazor WebAssembly example)
  builder.Services.AddScoped<CustomerStateManager>();
  
  // In a component
  [Inject] private CustomerStateManager _stateManager { get; set; }
  
  protected override void OnInitialized()
  {
      _stateManager.OnStateChanged += StateHasChanged;
  }
  
  public void UpdateCustomerEmail(string newEmail)
  {
      _stateManager.CurrentCustomer.Email = newEmail;
      _stateManager.NotifyStateChanged();
  }
  

• Choose SessionStorage if: You need basic persistence across page reloads, your CUSTOMER object is simple/serializable, and real-time updates aren’t critical. It’s a low-effort solution for straightforward scenarios.
• Choose a custom StateManager if: You need real-time sync across components, have complex state logic, or want full control over how CUSTOMER data is managed. For persistence, you can easily add code to sync the in-memory state with SessionStorage when the app starts or state changes.
• Hybrid bonus: Combine both! Use the StateManager for reactive in-memory state, and auto-sync it to SessionStorage in the background. This gives you real-time updates and persistence across reloads.

Hope that helps you make the right call for your app!

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