The URL is state
A filter nobody can link to is half a feature. Add from-url to a :state and the value lives in the query string as well as in memory: reload keeps it, a shared link arrives with it applied, and back and forward move through it.
Search and filter
Tier all, search "".
Nothing matches that search.
- Aurora Lamp · $49.00 (budget)
- Briza Fan · $89.00 (budget)
- Cove Shelf · $240.00 (premium)
- Dune Rug · $310.00 (premium)
Type in the box and watch the address bar. Then reload the page: the search and the tier come back. Copy the URL into a new tab and it opens on the same view. The tier radio is a second key riding along in the same URL; it is shown above the list rather than wired into the filter, so you can see two from-url keys travel together.
The rules
- The parameter is named after the state key. A section-scoped key like
cart:itemsbecomescart.items, so the name is always readable and always unique. - A value equal to its declared seed drops its parameter, so the default page keeps a clean URL.
- Writes go through
history.replaceState, so filtering never fills the back button with one entry per keystroke. - Combine it with
persistand the precedence is URL first, then the stored value, then the seed, so a link you were sent wins over what this browser remembers. from-urlbelongs to:stateonly. A:storeis shared by every page and every tab, while a query parameter belongs to one page's address, so puttingfrom-urlon a:storeis a compile error rather than a guess.