javascript - JavaScript 循环在“localStorage.removeItem”处停止

Question

为什么“localStorage.removeItem”会停止循环？如果我删除“localStorage.removeItem”并且只留下“警报”，它会循环整个事情，但是使用“localStorage.removeItem”它会在第一次匹配时停止。

function removeTask() {
    for (i=0; i < localStorage.length; i++){
        checkbox = document.getElementById('utford'+i);
        if (checkbox.checked == true) {
            alert(i);
            localStorage.removeItem(localStorage.key(i));
        }
    }
    printList();
}

Answer 1

如果您删除一个项目，这些键将向下移动一个索引。您需要向后循环。

function removeTask() {
    for (var i=localStorage.length-1; i>=0; i--){
        var checkbox = document.getElementById('utford'+i);
        if (checkbox.checked == true) {            
            localStorage.removeItem(localStorage.key(i));
        }
    }
    printList();
}

Answer 2

您正在迭代一个类似数组的对象，同时删除它的条目。这不起作用，因为每次删除都会混淆条目顺序。

考虑这个例子。

第一次迭代删除条目 #1：

Entry   key             value
#1      my-first-key    my-first-value
#2      my-2nd-key      my-2nd-value

第二次迭代尝试删除条目 #2：

Entry   key             value
#1      my-2nd-key      my-2nd-value
???     ???             ???

根据我对您的代码的理解，我建议您改用字符串键。然后，您可以选择与元素 ID 相同的键名。