Keeping page state across navigation

This tiny app has two pages with identical UI (a text box and a counter button), but different state handling:

  • Naive Page — state lives in ordinary component fields.
  • Fixed Page — state lives in a Scoped DI service instead.

Try this

  1. Go to Naive Page, type something and click the counter a few times.
  2. Click over to Home or Fixed Page, then click back to Naive Page.
  3. Notice it reset — navigating destroyed and recreated that page component.
  4. Now do the same thing on Fixed Page. Navigate away and back — this time it's preserved.
  5. Now try a full browser refresh (F5) while on Fixed Page. Notice that also resets it — a hard reload starts a brand-new circuit, which resets every scoped service for that tab, not just one page.
  6. Use the "Reset this page's state" button on the Fixed Page to see a selective, in-app way to clear just that page, instead of relying on a full reload.
  7. Check out Keep-Alive Demo for the heavier alternative: two components that are never destroyed at all, just shown/hidden.

Scaling past one or two pages

If you copy the Fixed Page pattern for a second page, the tempting next step is duplicating PageStateService's fields with a "2" suffix (NoteText2, Counter2, ...). That works, but it doesn't scale cleanly and it's easy to typo your way into two pages sharing a field by accident.

Multi-Page A and Multi-Page B show a version that scales: a single generic PageStateStore, registered once in Program.cs, hands out one instance of whatever small state class you ask for (MultiAState, MultiBState, ...), keyed by type. Adding a third page later just means adding a third tiny state class - the store itself never changes.