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

如果您只是想要一个地方来存储会话的一些全局变量，那么JavaScript Module可能会有效。

Answer 2

您是否可以使用客户端存储来存储全局变量？然后，您将在页面加载或刷新时丢失它。您可以使用它来调试并查看是否获得页面刷新，因为有时扩展是变幻无常的，您甚至没有注意到刷新，但如果您将变量存储为Web存储中的键值对，您可能会通过此

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

设置您的键/值对

localStorage.getItem('imgId');

检索您的键/值对

然后，您可以根据本地存储中设置的最后一个数字为客户端显示的每个系列图片设置新的本地存储。

FF扩展 - 不保持全局变量值

2 个答案: