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?

Protector one · Accepted Answer · 2010-01-30 17:44:18Z

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

answered Jan 30, 2010 at 17:44

Protector one

7,4175 gold badges69 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jerone · Accepted Answer · 2010-01-26 13:21:01Z

1

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

answered Jan 26, 2010 at 13:21

jerone

17.1k4 gold badges42 silver badges58 bronze badges

3 Comments

dani Over a year ago

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

dani Over a year ago

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

jerone Over a year ago

No problem. Then you can close this question.

George Kosmidis · Accepted Answer · 2013-11-29 15:48:18Z

0

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/

answered Nov 29, 2013 at 15:48

George Kosmidis

3593 silver badges13 bronze badges

Collectives™ on Stack Overflow

URL fragment identifier - simplify state handling (javascript)

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related