1

過去の検索をローカル ストレージに追加しようとしており、それを配列で実行しています。問題は、関数の呼び出しが 1 回だけであっても、値が 2 回追加されることです。新しい個別の検索ごとに、配列とストレージに追加したいのですが、5 つ以上ある場合は、最後の項目がポップされます。

検索が処理されるときに呼び出されます。

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); と 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

考えられる問題の 1 つは、が呼び出される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;
}
于 2013-01-07T09:31:38.007 に答える