FF擴展 - 不保留全局變量值

Question

我正在研究FF擴展，簡而言之，它將動態圖像加載到側邊欄。我得到的ID是來自JSON響應，並存儲在我打算使用它的同一個.js文件中聲明的全局變量中。我的問題是當我嘗試模擬分頁通過我的結果。我使用我的全局變量加載邊欄，一切正常。當我嘗試然後移動到下一組圖像來顯示使用ID我存儲在我的全局變量它失敗，由於我的變量已被完全重置。我去看看我可以給我的代碼粗略的看法：

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(); 
}, 

}; 

我意識到它的大量的代碼，我沒有張貼每個函數我有，沒有，這個特定的URL不起作用。沒有包括的所有東西都可以正常工作，並且完全按照它的設想行事，也沒有什麼更多，這就是爲什麼我將它排除在外。但是如果任何人都可以闡明爲什麼我的全局變量在我的初始加載邊欄和我點擊進入下一頁之間被清除，我將不勝感激。

如果您需要我添加或澄清某事，請告訴我，我會這麼做！我可能會最終減少代碼並刪除不相關的部分。

謝謝！

Answer 1

您能夠使用客戶端存儲來存儲全局變量嗎？那麼您將在頁面加載或刷新時不會丟失它。你可以使用它來調試，看看你是否得到一個頁面刷新，因爲有時擴展是反覆無常的，你甚至沒有注意到刷新，但如果你把變量作爲一個鍵值對存儲在web存儲中，你可能會通過這個。

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

設置你的鍵/值對

localStorage.getItem('imgId'); 

檢索您的鍵/值對

那麼你可以設置一個新的本地存儲已經顯示在每個系列照片客戶端基於本地存儲中設置的最後一個數字。

Answer 2

如果你只是想要一個地方存儲會話的一些全局變量，那麼JavaScript Module可能會工作。