jquery - 使用循环从 localStorage 中删除键

Question

我有一个页面，您可以在其中添加和删除将显示在无序列表中的成分。当用户点击“查找食谱！” 列表项将保存在 localStorage 中的单独键中。

现在我将删除胡萝卜、土豆、番茄和薯条，然后点击“查找食谱！”。现在代码将检查剩下多少 li 并删除其余的。

var ingredients;
$('#findRecipe').click( function() {
    var i;
    for(i = 1; i <= $('#ulLeft li').length; i++) {
        ingredients = $('#ulLeft li:nth-child(' + i + ')').text();
        localStorage.setItem('ingredientsAvailable' + i, ingredients);
    }
    if(localStorage.key(i) !== null) {
        for(var j = i; j<=localStorage.length; j++ ) {
            localStorage.removeItem('ingredientsAvailable' + j);

        }
    }

});

但是代码只删除了 localStorage 中的 2 个键。不管我删除多少，它只会删除 2 个键。

但是当我第二次这样做时，它会删除正确的号码。我的代码有什么问题？

Answer 1

当您删除一个项目时，长度会发生变化。您应该向后迭代，如下所示：

for( var j = localStorage.length-1; j>=i; j--) {

这将确保动态长度不会影响您。

localStorage顺便说一句，如果你运行它JSON.stringify（并JSON.parse取回它），你可以放入一个数组，或者join用你知道不会在元素中的定界符（|通常是一个好的定界符）并split稍后再设置它。数组更容易使用。

Answer 2

如果你使用https://github.com/nbubna/store那么你可以做 store.clear(); 并让图书馆担心它是否正确（当然，它确实如此）。