Pass Values Between Pages

Pass Values Between Pages

This tour is about carrying just enough context from one page to the next without turning browser state into a hidden dependency. In Wappler, the right choice depends on whether the value should be shareable in the URL, temporary for one tab, or persistent across visits.

Choose the transport by lifetime

If the next page should be bookmarkable or shareable, keep the value in the URL. If the value is only part of a temporary workflow, store it in session state. If it should survive return visits, use local or cookie-based persistence deliberately.

URL parameters

Best when the receiving page should be reproducible from a link.

Session state

Best for one-tab workflows and short-lived progress.

Persistent browser state

Best for preferences or remembered context that should stick.

Make shareable state visible in the URL

Keep temporary workflow context tab-scoped

Persist only what users expect to stay

Avoid hidden coupling

A common mistake is passing important page context in storage when the user actually expects a real link. Hidden state makes refreshes, deep links, and debugging harder. Use browser storage only when invisibility is a feature, not an accident.

important: If someone should be able to reload or share the destination page and see the same record, prefer URL state.

Prefer explicit links for page identity

Use storage for convenience, not core routing

Design for reload and supportability

Practical patterns

Use the same mental model whether you are passing a selected record id, a search term, or part of a multi-step workflow.

Pattern: selected record or filter

When the destination page should open a specific record or filtered view, pass the key or filter in the URL so the page can reconstruct itself cleanly. This keeps the navigation honest and easier to debug.

Store record id in the query string

Bind the destination page to query-driven state

Let the URL explain the page state

Pattern: multi-step workflow handoff

If the next page is part of a wizard or temporary task, use session state to carry draft values forward without polluting the address bar. Clear the state once the workflow is complete so stale values do not confuse the next run.

Use session for temporary handoffs

Clear state when the workflow completes

Keep durable data on the server when it becomes official

Pattern: remembered preference

If the page handoff is really about preserving a user preference, use cookie or local storage instead of pretending it is page identity. That keeps routing clean while still remembering what the user chose last time.

Use local or cookie state for remembered preferences

Don’t overload URLs with purely personal defaults

Separate page identity from personalization

Wrap-up

Continue into the state-management family from here.

Next steps

Choose a related state-management tour to continue.