Saving and Recreating State via the URL

Monday, October 1, 2018

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.

The results are displayed and the URL is now 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 table link to the left.
The URL is now https://punkish.org/Saving-and-Recreating-State-via-the-URL?q=#table.
one two three

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 https://punkish.org/Saving-and-Recreating-State-via-the-URL?q=#table!highlightCell:id? where 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.

  1. the query is performed for "bar" and the results are shown, with the search field indicating the search term.
  2. the page scrolls down to the table section, and
  3. the 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 (fn1:param1,param2;fn2:,fn3:param1,…)
The hash fragment #table which specifies an anchor on the page.
The hash fragment encoded as expected, with a leading '#'