Javascript – URL fragment identifier – simplify state handling (javascript)


I have a web application which makes extensive use of the fragment identifier for handling "state".$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: (no hash) (contains "example");vid=4;vid=7;modified=5 (contains "modified");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?

Best Solution

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]] = [keyValuePair[1]];

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