Extension FF - Ne pas conserver les valeurs de variables globales

Question

Je travaille sur une extension FF qui, en somme, charge des images dynamiques dans une barre latérale. Les identifiants que je reçois proviennent d'une réponse JSON et sont stockés dans une variable globale déclarée dans le même fichier .js que j'ai l'intention de l'utiliser. Mon problème est quand j'essaie de simuler la pagination à travers mes résultats. Je charge la barre latérale en utilisant ma variable globale et tout va bien. Lorsque j'essaie de passer ensuite à l'ensemble d'images suivant pour afficher les ID que j'ai stockés dans ma variable globale, cela échoue en raison de la réinitialisation complète de ma variable. Je vais voir si je peux donner une vue approximative de mon 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(); 
}, 

}; 

Je réalise beaucoup de son code, et je ne poste pas toutes les fonctions que j'ai, et non, cette URL spécifique ne fonctionne pas . Tout ne fonctionne pas bien, et fait exactement ce que c'est supposé, et rien de plus, c'est pourquoi je l'ai laissé de côté. Mais si quelqu'un pouvait expliquer pourquoi ma variable globale est effacée entre ma charge initiale de la barre latérale, et quand je clique pour aller à la page suivante, je l'apprécierais grandement.

Si vous avez besoin de moi pour ajouter quelque chose ou clarifier quelque chose s'il vous plaît faites le moi savoir et je le ferai! Je finirai probablement par amincir ce code et supprimer des parties non pertinentes.

Merci!

Answer 1

Seriez-vous en mesure d'utiliser le stockage côté client pour stocker la variable globale? vous ne perdrez pas le contenu lors du chargement ou de l'actualisation de la page. Vous pouvez soit utiliser ceci pour déboguer et voir si vous obtenez une actualisation de page parce que parfois les extensions sont inconstantes et vous ne remarquez même pas l'actualisation, mais si vous stockez la variable comme paire valeur clé dans le stockage Web, vous pouvez dépasser cette .

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

pour définir votre paire de clés/valeur

localStorage.getItem('imgId'); 

pour récupérer votre paire de clés/valeur

Ensuite, vous pouvez définir un nouveau stockage local pour chaque série d'images qui a été affiché à le client basé sur le dernier numéro défini dans le stockage local.

Answer 2

Si vous voulez simplement un emplacement pour stocker des variables globales pour une session, alors un JavaScript Module fonctionnera probablement.