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
ScopedDI service instead.
Try this
- Go to Naive Page, type something and click the counter a few times.
- Click over to Home or Fixed Page, then click back to Naive Page.
- Notice it reset — navigating destroyed and recreated that page component.
- Now do the same thing on Fixed Page. Navigate away and back — this time it's preserved.
- 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.
- 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.
- 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.