Question

I am making an app in html5.It is like a quiz based app. I am randomly fetching questions from the XML and displaying it one by one.I am using page navigation for that. After completing and submitting your answer u will switch to other page.if once i submit my answer i cannot attempt it back. but i can see the feedback and score on switching to that page that is my problem. I have display that feedback and score and to store it in local storage. i am able to do local storage but values that i am getting is overriding. so i am getting last submitted value.Now my concern is to divide that values navigation number wise.right now what is happening if i submit my answer and suppose i am at navigation number 3 n i am looking at navigation part 1 then there also i am getting last submitted value not the part 1 value.Please give ur suggestion and help me out for that.

Here is the code snippet:

//for navigation of pages
$(document).ready(function (){            
    /*$(document).bind("contextmenu",function(e){
    return false;
    });*/
    var obj;
    total=x.length;

    for(var j=0;j<x.length;j++)
    { 
        if(j==0)
        {
            $("#navigationlist").append('<li><a href="#" id="selected_link"  class="navg" onClick="display_nav('+j+',this);">'+(j+1)+'</a></li>');                 
            display_nav(j,$("#selected_link"))        
        }
        else
            $("#navigationlist").append('<li><a href="#" class="navg" onClick="display_nav('+j+',this);">'+(j+1)+'</a></li>');   
    }               

    $("#next").bind("click",function (){
        $(".navg").each(function(index){        
            if($(".navg").length==(i+1))
            {
                if(index==0)
                    obj=$(this);
                }
                else
                {
                if(index==(i+1))
                    obj=$(this);
            }
        });     


            for(var j=0;j<xmlDoc.getElementsByTagName("question").length;j++)
            {
                xmlDoc.getElementsByTagName("question")[j].removeAttribute("status");
            }

            $("#btnSubmit").attr("disabled","false");
            $("#btnSubmit").attr("onclick","checekAnswer()");

            display_nav(0,obj)
        }
        else
            display_nav((i+1),obj)
    });         
}); 


and

correctAnswers++;
            localStorage.setItem('feedback',JSON.stringify(feedback[0].childNodes[0].nodeValue));
            $("#feedback").append(score[0].childNodes[0].nodeValue);
            $("#feedback").append("<br/>");
            $("#feedback").append(feedback[0].childNodes[0].nodeValue);     
        }
        else
        {
            //var val = [];
            //val.push(feedback[0].childNodes[0].nodeValue);
            //localstorage.setItem('feedback', JSON.stringify(val));
            //localStorage.setItem('feedback',JSON.stringify(feedback[0].childNodes[0].nodeValue));
            //alert(localStorage.getItem("feedback"));
            /*var v={"test":feedback[0].childNodes[0].nodeValue};
            localStorage.setItem('feedback',v);
             alert(localStorage.getItem('feedback'));*/

            scores1.push(feedback[0].childNodes[0].nodeValue);

            localStorage.setItem("highscores",JSON.stringify(scores1));
            var scores = localStorage.getItem("highscores");

            alert(scores);
            scores = JSON.parse(scores);

            alert(scores[0]);

            $("#feedback").html(score[1].childNodes[0].nodeValue);
            $("#feedback").append("<br/>");
            $("#feedback").append(feedback[0].childNodes[0].nodeValue);
            $("#feedback").append("hello");

        }

        //$("#counter").html("left="+xPos+",top="+yPos);    
        $("#trFeedBack").show("slow");  
        display_nav(j,obj)  
    }
} // end function   

Answer 1

If I understand your question, your problem is to store items with same name but related to different pages.

LocalStorage being defined by domain, and not by page, you must change the keys you use. The usual solution is to prefix the names you want.

For example :

localStorage['pages.12.feedback'] = "the feedback I'm giving related to page 12";
localStorage['global.feedback'] = "the feedback I'm giving related to the global site";

(you’ll notice I use the short notation, that I find more readable that using setItem)