使用循环从本地存储中删除密钥

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通常是一个好的分隔符）并且{{1}}稍后会出现它。数组很容易使用。

Answer 2

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