在循环中设置本地存储项目时，仅添加偶数

Question

请考虑以下代码和输出。我不知道为什么它最后只处理偶数的键。关于为什么最后不处理奇数键的任何想法？我在 IE 11 中看到了这个。

try {
    localStorage.clear();

    for (var i = 0; i < 10; i++) {
        var item = 'ir360-grid-' + i;
        localStorage.setItem(item, 'test');
    }

    for (var i = 0; i < localStorage.length; i++) {
        var key = localStorage.key(i);
        console.log('processing key ' + key);
        if (key.startsWith("ir360-grid")) {
            console.log("removing: " + key);
            localStorage.removeItem(key);
        }
    }
} catch (e) {
    console.log(e);
}

processing key ir360-grid-0
removing: ir360-grid-0
processing key ir360-grid-2
removing: ir360-grid-2
processing key ir360-grid-4
removing: ir360-grid-4
processing key ir360-grid-6
removing: ir360-grid-6
processing key ir360-grid-8
removing: ir360-grid-8

Answer 1

也在 Chrome 发生。

我很确定会发生这种情况，因为 localStorage 是 Object 而不是 Array。

在每次迭代中，您都会减少 localStorage 的长度，因此您只循环了预期次数的一半，并且由于 localStorage 是一个对象，因此键不会根据索引发生变化。

所以它是这样的：

i = 0
remove localStorage.key(0) // now ir360-grid-1 is at localStorage.key(0) and ir360-grid-2 is at localStorage.key(1)
i = 1  
remove localStorage.key(1) // which contains ir360-grid-2, now ir360-grid-3 is at key(1) and ir360-grid-4 is at key(2)
i = 2 
remove localStorage.key(2) // which contains ir360-grid-4 
and so on...

使用Object迭代循环解决了问题：

for (var i in localStorage) {
        var key = localStorage.key(i);
        console.log('processing key ' + key);
        if (key.startsWith("ir360-grid")) {
            console.log("removing: " + key);
            localStorage.removeItem(key);
        }
    }

在循环中设置本地存储项目时，仅添加偶数

When setting local-storage items in loop only even numbers get added

local-storage