There's hardly a website out these days that does not use some dynamic HTML to enrich the user interface. It's great to have tabs and other user interface widgets which can be easily flicked between without needing a page reload to show different content.

The problem is that there's no easy way for a user to bookmark a page in the state that they left it. Here's an example of the problem, say I'm looking at a slideshow on Flickr and I see a really great picture that I want to bookmark or send the link to a friend.



Well I don't see any handy email button in the user interface so I grab the URL out of the address bar and save it, but the URL goes to the first slide in the sequence, and I wanted it to go to the picture I chose!

http://www.flickr.com/photos/matnkat/sets/72157603798326395/show/

Ok, there's the problem, and I stumbled across the solution on a recent consulting job. If you take a look at the slideshow on YourProm.com you'll see that what they have done is to save a variable to the URL using a non-existant anchor tag. What they did was to use javascript to change the URL to add on '#picture=234', which allow the page to be bookmarked using the regular browser bookmark button. Then when you return to the page a little bit of JavaScript is used to read that variable out again. Neato!

Ok, so lets go one better. Lets write a handy little library called JSURL that allows us to take any JavaScript variable and read and write it to the URL. You got it!

We've written this all up as a javascript library with four handy functions that you can use to store Numbers, Strings, Dates and Booleans to the URL. You can specify the token to be used in the URL, and here's the syntax:

var variable;
// Read from the URL
variable = variable.jsurlRead(token);
// Save to the URL
variable.jsurlSave(token);
// Remove token from the URL
variable.jsurlRemove(token);
// See if the token is in the URL
alert(variable.jsurlTest(token));

Here's a demo of this in action, saving the state of a colored chip in the URL. There's also another demo showing multiple objects being saved to the URL.

If you want to use this please go ahead, you can Download the JSURL Zip file, and yes it works on all modern browsers.