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 u…

Accepted Answer

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

URL fragment identifier - simplify state handling (javascript)

Solution

Problem