FF Extension - Not Keeping Global Variable Values

Question

I'm working on a FF extension that in short, loads dynamic images into a sidebar. The ID's that I get are from a JSON response, and are stored in a global variable declared in the same .js file as I intend to use it. My problem is when I try to simulate paging through my results. I load the sidebar using my global variable and everything is ok. When I try to then move on to the next set of images to display using the ID's i've stored in my global variable it failes due to my variable having been completely reset. I'll see if I can give a rough view of my code:

var searchVars = {
     'keyword': "", 
     'totalResults': 0, 
     'imgIds': [], 
     'cIds': [],
     'curPg': "1",
     'dispStartIdx': 0,
     'dispEndIdx': 4,
     'dispPerPg': 5,

      toString: function() {
           return this.keyword + ", " +
                this.totalResults + ", " +
                this.imgIds + ", " +
                this.cIds + ", " +
                this.curPg + ", " +
                this.dispStartIdx + ", " +
                this.dispEndIdx + ", " +
                this.dispPerPg;
      }    
 };

 var corbisquicksearch = {
 onSearch: function () {
    cqsearch.resetSearch(); //Resets my global variable every search

    searchVars.keyword = cqsearch.getSelectedText(); //searchVars is my global variable im having trouble with
    cqsearch.extendImageCache();
}

extendImageCache: function() {
    var postToURL = 'http://www.agenericurl.com/Search?';
    var keyword = searchVars.keyword;
    var p = 1; //Page Offset for ID's returned
    var size = 200; //Number of ID's returned in the response set
    var query = "searchQuery=" + encodeURIComponent("q=" + keyword + "&p= " + p +"&s=" + size);

    var request = new XMLHttpRequest();  
    request.open('post', postToURL + query, true);    
    request.onreadystatechange = function (aEvt) {
        if (request.readyState == 4) {  
            alert(1);
            if(request.status == 200) {
                alert(2);
                var responseInJSON = JSON.parse(request.responseText);
                searchVars.totalResults = responseInJSON.ResultsCount;

                var i = searchVars.imgIds.length;
                var lastResult = i + responseInJSON.SearchResultImages.length;

                while (i < lastResult) {
                    searchVars.imgIds[i] = responseInJSON.SearchResultImages[i].ImageId;
                    searchVars.cIds[i] = responseInJSON.SearchResultImages[i].CorbisId;                        
                    i++;
                }

                cqsearch.loadSidebar();
            }
            else {
                dump("Error loading page\n");  
            }
        }  
    };  
    request.send();
},

loadSidebar: function() {
    //Initializing Env Variables
    var sidebar = document.getElementById("sidebar");
    var sidebarDoc = sidebar.contentDocument || document;

    var searchInfoBox = sidebarDoc.getElementById("search_info");
    var resultsBox = sidebarDoc.getElementById("img_results");
    var pagingInfoBox = sidebarDoc.getElementById("paging_info");

    //Loading up the search information
    var searchInfo = "Displaying Results for <b>{0}<b/><br>Showing <b>{1} - {2}</b> of <b>{3}</b>";
    var args = [searchVars.keyword, searchVars.dispStartIdx, searchVars.dispEndIdx, searchVars.totalResults];

    var infoLbl = document.createElement("label");
    infoLbl.setAttribute("value", cqsearch.strFormat(searchInfo, args));

    searchInfoBox.appendChild(infoLbl);

    while (resultsBox.firstChild) {
        resultsBox.removeChild(resultsBox.firstChild);
    }

    //Loading up the image results
    var i = searchVars.dispPerPg * (searchVars.curPg - 1);
    var lastDisplayed = (searchVars.curPg * searchVars.dispPerPg) - 1;
    alert("length" + searchVars.toString());        
    while (i <= lastDisplayed) {
        var imageID = searchVars.imgIds[i]; 
        var cID = searchVars.cIds[i];


        var imgSrc = cqsearch.createMediaUrlParams(imageID, 'thumb', cID, false).url; //thumb, 170, hover
        var img = document.createElement("image");
        img.setAttribute("src", imgSrc);
        alert(imgSrc);
        img.setAttribute("class", "img");

        var idDelimiter = "_image";
        var id = cID + idDelimiter;
        img.id = id;
        img.addEventListener("click", function () {
            cqsearch.openEnlargementPage(this.id.substring(0, this.id.indexOf(idDelimiter)));
        }, false); 

        var imgBox = document.createElement("box");
        imgBox.setAttribute("class", "imgContainer");

        imgBox.appendChild(img);
        resultsBox.appendChild(imgBox);

        i++;
    }

    //Loading up paging info and functionality
    var prevBtn = document.createElement("button");
    prevBtn.setAttribute("label", "Previous");
    prevBtn.setAttribute("oncommand", "cqsearch.prevPage()");
    var nextBtn = document.createElement("button");
    nextBtn.setAttribute("label", "Next");
    nextBtn.setAttribute("oncommand", "cqsearch.nextPage()");

    pagingInfoBox.appendChild(prevBtn);
    pagingInfoBox.appendChild(nextBtn);
},

nextPage: function() {
    searchVars.curPg++;

    alert(searchVars.imgIds);

    cqsearch.loadSidebar();
},

};

I realize its a lot of code, and I didn't post every function I have, and no, this specific URL does not work. Everything not included works fine, and does exactly what its supposed too, and nothing more which is why I left it out. But if anyone could shed some light on why my global variable is being cleared between my initial load of the sidebar, and when I click to go to the next page, I would greatly appreciate it.

If you need me to add something or clarify something please let me know and I will do so! I will probably end up sliming this code down and removing irrelevant parts.

Thanks!

Answer 1

If you simply want a place to store some global variables for a session, then a JavaScript Module would probably work.

Answer 2

Would you be able to use the client side storage to store the global variable? you will then, not lose it on page loads or refresh. You could either use this to debug and see if you are getting a page refresh because sometimes extensions are fickle and you don't even notice the refresh, but if you store the variable as a key value pair in web storage you might get past this.

localStorage.setItem('imgId', '5');

to set your key/value pair

localStorage.getItem('imgId');

to retrieve your key/value pair

Then you can set a new local storage for each series of pictures that has been displayed to the client based on the last number that is set in local storage.