Keep screen state in the address

How to do it

Read the state from the query string when the screen loads, and write it back when it changes. Use replace for typing and push for steps people expect Back to undo, such as opening a record or moving to another page of results. Validate each parameter and fall back to a default for bad values. Leave defaults out, so links stay short. Never put personal data or tokens in the address.

Example

const SORTS = ['newest', 'oldest', 'amount'] as const;
type Sort = (typeof SORTS)[number];

export function readOrderFilters(url = new URL(location.href)) {
  const sort = url.searchParams.get('sort');
  return {
    status: url.searchParams.get('status') ?? 'any',
    sort: (SORTS as readonly string[]).includes(sort ?? '') ? (sort as Sort) : 'newest',
    cursor: url.searchParams.get('cursor'),
  };
}

export function writeOrderFilters(filters: Record<string, string | null>, mode: 'push' | 'replace') {
  const url = new URL(location.href);
  for (const [name, value] of Object.entries(filters)) value ? url.searchParams.set(name, value) : url.searchParams.delete(name);
  history[mode === 'push' ? 'pushState' : 'replaceState'](null, '', url);
}

SORTS = {"newest", "oldest", "amount"}

@app.get("/orders")
def order_list():
    sort = request.args.get("sort", "newest")
    filters = OrderFilters(
        status=request.args.get("status", "any"),
        sort=sort if sort in SORTS else "newest",
        cursor=request.args.get("cursor"),
    )
    return render_template("orders/list.html", page=orders.list(current_user().account_id, filters), filters=filters)

How to check

A browser test sets a filter, a sort and page 3, copies the address and opens it in a new context. The same rows show. Back returns to the previous page of results.