im wondering if anyone can help me with my javascript. I download xml data from a remote source containing a username and a description field which i then put into a menu - showing a rounded list item for each username and description as shown:

username: description
username: description etc..

when one of the above list items is selected, it loads up the #view anchor page which will then go to display more information contained within the xml file.

My question is, how does the new page (anchor) know which option has been selected? I tried the code below using a function to write to a localStorage variable but, it seems to get overwritten each time it is printed to the screen - not each time it is clicked with the onclick event...
<script type="text/javascript">

function setTagview(z){
localStorage.tag = z;

<title>my app</title>

<!-- main list view page -->
<div id="home">
<div class="toolbar">
<h1>my app</h1>

<script type="text/javascript">
var i=0;
document.write("<ul class='rounded'>");
for (i=0; i<=x.length; i++){
var username = xmlDoc.getElementsByTagName("username")[i].childNodes[0].nodeValue;
var description = constrain(xmlDoc.getElementsByTagName("description ")[i].childNodes[0].nodeValue, 20);

document.write("<li class='arrow'><a href='#view' onClick='setTagview(" + i + ");'>" + username + ": " + description + "</a></li>");

in an instance where 2 items are received from xml, setTagview should call setTagview(0) for the first item, and setTagview(1) for the second item - hence setting the localstorage variable in the method setTagview. However the above output when clicking each menu item individually shows that they both end up using '1' i.e. the variable is set both times to 1, i.e. the first item with i = 0 is ignored and 1 is used instead, if that makes sense.

so does anyone know why that is happening? and is there any way around it?