URL fragment identifier - simplify state handling (javascript)

Question

I have a web application which makes extensive use of the fragment identifier for handling "state".

examplesite.com/#$mode=direct$aa;map=t;time=2003;vid=4;vid=7

A number of questions:

1) What is a good way of assigning the various "location.hash name value-pairs" to variables to keep track of the state?

1a) Should I make an object that keeps track of the state in js or declare global variables for each name value-pair?

1b) Are there any good jquery plugins to simplify this?

1c) If I want to keep track of something called "color" - should it at all times be appended to the fragment (#) and what is the correct way of checking if it is defined; can the code below be improved?

var color;

var hashString = location.hash;
var nvPairs = hashString.split(";");
var nvPair = new Array();

for (i = 0; i < nvPairs.length; i++)
{
    var keyValuePair = nvPairs[i].split("=");
    nvPair[keyValuePair[0]] = keyValuePair[1];
}

if (nvPair['color']) color = nvPair['color'];       

1d) As some names are used twice ("vid" in the example above) - how could I easily store them is separate variables?

2) There are 4 different "hashes" I want to pay extra attention to:

examplesite.com/ (no hash)
examplesite.com/#example=5 (contains "example")
examplesite.com/#time=2003;vid=4;vid=7;modified=5 (contains "modified")
examplesite.com/#time=2003;vid=4;vid=7 (does not contain "modified" or "example")

How would you write a control structure that extracts variables from the hash when the application loads and checks the above conditions?

3) How can the previous state/s be stored and how to trigger a change of state when the back-button is pressed?

Triacid

Answer 1

I would just use an object containing arrays, instead of an array. The code would look something like:

var color; 

var keyValuePair,
    hashString = location.hash,
    nvPairs = hashString.split(";"),
    nvPair = {}; 

for (var i = 0; i < nvPairs.length; ++i){ 
    keyValuePair = nvPairs[i].split("="); 
    if (keyValuePair[0] in nvPair)
      nvPair[keyValuePair[0]].push(keyValuePair[1]);
    else
      nvPair[keyValuePair[0]] = [keyValuePair[1]];
} 

if ('color' in nvPair) color = nvPair['color'][0];

Malti

Answer 2

I believe the BBQ from Ben Alman can help you: http://benalman.com/projects/jquery-bbq-plugin/

Demoiselle

Thank you, I checked this one out but it doesn't seem to work with the example hash string given ... – Triacid

Update: It works if ";" are replaced with "&" - a great plugin! – Triacid

No problem. Then you can close this question. – Demoiselle

Answer 3

A little late on this but jQuery 1.9 causes problems on Ben's plugin ($.browser)

A forked corrected version can be found here:
https://github.com/georgekosmidis/jquery-hashchange

And a plugin to help handle hash changes here:
https://github.com/georgekosmidis/jquery-hashhandle

More on this here:
http://mycodepad.wordpress.com/2013/12/19/jquery-making-ajax-applications-crawlable/

Pomerleau