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

Question

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

现在我将删除胡萝卜、土 bean 、番茄和薯条，然后单击“查找食谱!”。现在代码将检查还剩下多少个 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--) {

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

顺便说一句，如果您通过 JSON.stringify 运行数组(以及 JSON.parse 来获取它)，则可以将数组放入 localStorage 中)，或者使用您知道不会出现在元素中的分隔符join(| 通常是一个不错的分隔符)并split稍后再说。数组更容易使用。