1

我正在尝试将过去的搜索添加到本地存储并使用数组来执行此操作。问题是它会将值添加两次，即使只有一次调用该函数。对于每个新的、不同的搜索，我希望将其添加到我的数组和存储中，如果超过五个，则弹出最后一项。

处理搜索时调用：

SetLocalStorageItem(searchString[1]);

应该这样做的功能：

function SetLocalStorageItem(search) {
    if(search === '') {
        return;
    }
    console.log(localStorage);

    // Check if the browser support Local Storage
    if(localStorage) { 
        if(localStorage["pastSearches"]) {
            pastSearches.push(JSON.parse(localStorage["pastSearches"]));
        }
        // Check if the value exists in the array,
        // returns -1 if the array does not contain the value
        if($.inArray(search, pastSearches) == -1) {
            // If not, put it first and...
            pastSearches.unshift(search);
            //  ...pop one at the end if array is too big
            if(pastSearches.length > 5) {
                pastSearches.pop();
            }
            pastSearches.push(search);

            // Adding the search to the storage
            localStorage["pastSearches"] = JSON.stringify(pastSearches);
            DisplayPastSearches();
        }
    }
}

清除和显示功能：

function ClearSearches() {
    // If there is any past searches
    localStorage.clear();
    pastSearches = [];
}

function DisplayPastSearches() {
    if(pastSearches.length) {
        $("<div>" + pastSearches + "</div>").appendTo(".container");
    }
}

现在，如果我清除搜索数组并且存储为空，然后运行代码并搜索“billy”，上面的console.log提示：

Storage
length: 1
pastSearches: "["billy","billy"]"
__proto__: Storage
4

2 回答 2

1

你正在推动localStorage["pastSearches"]你的pastSearches阵列。
这意味着您正在将一个数组推送到您的数组。基本上，您正在这样做：

var a = [1,2],
    b = [3,4];
a.push(b);
// a == [1, 2, [3, 4]]

执行此操作时，旧内容也仍在数组中，因此您正在复制数据。

此外，真正的问题是您同时使用了pastSearches.unshift(search); and pastSearches.push(search);，并添加search了pastSearches两次。

试试这个：

function SetLocalStorageItem(search) {
    if(search === '') {
        return;
    }
    console.log(localStorage);

    // Check if the browser support Local Storage
    if(localStorage) { 
        if(localStorage["pastSearches"]) {
            pastSearches = JSON.parse(localStorage["pastSearches"]);
        }
        // Check if the value exists in the array,
        // returns -1 if the array does not contain the value
        if(pastSearches.indexOf(search) == -1) { // Also, no need to use jQuery here.
            // If not, put it first and...
            pastSearches.unshift(search);
            //  ...pop one at the end if array is too big
            if(pastSearches.length > 5) {
                pastSearches.pop();
            }
            // pastSearches.push(search); <-- would you look at that, you're adding search to the array twice.

            // Adding the search to the storage
            localStorage["pastSearches"] = JSON.stringify(pastSearches);
            DisplayPastSearches();
        }
    }
}
于 2013-01-07T09:29:09.923 回答
0

一个可能的问题是解析后的数组在pastSearches每次SetLocalStorageItem()调用时都会被直接推送到数组中：

if(localStorage["pastSearches"]) {
   pastSearches.push(JSON.parse(localStorage["pastSearches"]));
}

您可能想在添加新元素之前清空数组：

if(localStorage["pastSearches"]) {
   pastSearches = JSON.parse(localStorage["pastSearches"]);
}

然后将新元素添加到其中：

过去搜索.push(搜索);

附带说明：为了清空数组，您可以简单地将其长度设置为零。这将阻止创建新的数组对象：

function ClearSearches() {
    // If there is any past searches
    localStorage.clear();
    pastSearches.length = 0;
}
于 2013-01-07T09:31:38.007 回答