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

examplesite/#$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/ (no hash)
examplesite/#example=5 (contains "example")
examplesite/#time=2003;vid=4;vid=7;modified=5 (contains "modified")
examplesite/#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?

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

examplesite./#$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./ (no hash)
examplesite./#example=5 (contains "example")
examplesite./#time=2003;vid=4;vid=7;modified=5 (contains "modified")
examplesite./#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?

• javascript
• jquery
• url
• fragment-identifier

Share Improve this question Follow edited Mar 11, 2010 at 4:17 Josh Lee 178k3939 gold badges277277 silver badges281281 bronze badges asked Jan 26, 2010 at 13:16 danidani 5,01088 gold badges5757 silver badges9696 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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];

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

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./georgekosmidis/jquery-hashchange

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

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