Saving and Recreating State via the URL
Imagine the following scenario: The user goes to
https://punkish.org/Saving-and-Recreating-State-via-the-URL, enters a term in a search field and hits the go button. Go ahead, enter some text in the field below and hit the button.
https://punkish.org/Saving-and-Recreating-State-via-the-URL?q=. Note that the search field shows that a search was performed for "". The user then clicks on the table link (which is an anchor on the page). This causes the page to scroll down to the section with the table. Go ahead, click on that
tablelink to the left.
|The URL is now |
The user clicks on a table cell firing an event that highlights that cell in red. Go ahead, click on any of the table cells above. The URL is now
id is the id of the highlighted cell.
Then the user bookmarks the URL or sends it to a friend. When its recipient opens that URL (or when the user clicks on the bookmark at some point in time later), the state is restored exactly as what it was for the sender. In other words, the URL is parsed and the actions performed to restore the state… You can test this right now by selecting the URL and pasting it in a new browser window. The contents in that new window should look exactly like this one.
- the query is performed for "bar" and the results are shown, with the search field indicating the search term.
- the page scrolls down to the table section, and
highlightCell(id?)event is fired highlighting the specified cell in the table.
This way the state of a page is encoded in the URL which can be shared and then recreated by the recipient of the URL bookmark.
So, I have three sets of params that I want to clearly identify:
- The queryString
?q=that is processed on the server
- The queryString is encoded as expected, a key:value pair separated by '='
- The event
highlightCell:id?that is processed in the client, and
- The event is encoded as a key:value pair separated by ':' where the key is the function and the value is the parameter. In case of no parameter, the value is left blank (
fn:. Since events have to fire in a particular order, they are provided as an ordered list of key:value pairs (
- The hash fragment
#tablewhich specifies an anchor on the page.
- The hash fragment encoded as expected, with a leading '#'