Question

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

处理搜索时调用：

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

Answer 1

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

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

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

此外，真正的问题您同时使用pastSearches.unshift(search); 和 pastSearches.push(search);，将search添加到{{1}两次。

试试这个：

pastSearches

Answer 2

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

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

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

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

然后再添加新元素：

pastSearches.push（搜索）;

作为旁注：为了清空数组，您可以简单地将其长度设置为零。这将阻止创建一个新的数组对象：

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

在本地存储中使用数组

2 个答案: