Расширение FF - не сохраняя значения глобальной переменной

Question

Я работаю над расширением FF, что, короче говоря, загружает динамические изображения в боковую панель. Идентификаторы, которые я получаю, связаны с ответом JSON и хранятся в глобальной переменной, объявленной в том же файле .js, что и я. Моя проблема заключается в том, что я пытаюсь моделировать пейджинг по моим результатам. Я загружаю боковую панель, используя мою глобальную переменную, и все в порядке. Когда я пытаюсь перейти к следующему набору изображений для отображения с использованием идентификаторов, которые я сохранил в своей глобальной переменной, он не работает из-за того, что моя переменная была полностью сброшена. Я буду видеть, если я могу дать примерное представление моего кода:

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

Можете ли вы использовать хранилище на стороне клиента для хранения глобальной переменной? вы не потеряете его при загрузке или обновлении страницы. Вы можете использовать это для отладки и посмотреть, обновляется ли страница, потому что иногда расширения являются непостоянными, и вы даже не замечаете обновление, но если вы храните переменную в виде пары ключевых значений в веб-хранилище, вы можете пройти мимо этого ,

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

, чтобы установить пару ключ/значение

localStorage.getItem('imgId'); 

для получения вашей пары ключ/значение

Затем вы можете установить новую локальную память для каждой серии снимков, которые были отображаться в клиент на основе последнего номера, установленного в локальном хранилище.

Answer 2

Если вам просто нужно место для хранения некоторых глобальных переменных для сеанса, возможно, будет работать JavaScript Module.