在本地存储中使用阵列

问题描述

我试图将过去的搜索添加到本地存储中，并使用数组来完成.问题在于，即使仅一次调用该函数，它也会将值相加两次.对于每个新的不同搜索，我希望将其添加到阵列和存储中，如果超过五个，则弹出最后一项.

I am trying to add past searches to local storage and doing that with an array. The problem is that it adds the value two times, even if there is just one call to the function. For every new, distinct search I want it to be added to my array and storage, if there is more than five, the last item is popped.

在处理搜索时调用:

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会提示:

Now, if I clear the searches the array and the storage is empty, and then run the code and searches for "billy", the console.log above prompts:

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

推荐答案

您正在将localStorage["pastSearches"]推入您的pastSearches数组.
这意味着您正在将阵列推入阵列.基本上，您正在这样做:

You were pushing the localStorage["pastSearches"] to your pastSearches array.
This means you were pushing an array to your array. Basically, you were doing this:

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

这样做的同时，旧内容也仍然在数组中，因此您正在复制数据.

While doing this, the old content was also still in the array, so you're duplicating data.

另外，真正的问题是，您同时使用了pastSearches.unshift(search); 和 pastSearches.push(search);，两次将search添加到pastSearches.

Also, The real problem is that you were using both pastSearches.unshift(search); and pastSearches.push(search);, Adding search to pastSearches twice.

尝试一下:

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

这篇关于在本地存储中使用阵列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！