Javascript localStorage 不工作它会覆盖对象

Question

我在 info_array 中有 20 个按钮和 20 个链接和描述。我为每个按钮添加了点击事件监听器。 addEventListener 中的点击函数必须在 localStorage 中保存唯一信息，并在每次新按钮点击时递增对象键。

问题是该函数起作用并在 localStorage 中保存具有唯一值的对象，例如 0,1,2,3,... 直到 10th 对象。当对象键达到 10 时，键为 11 的第 11 个对象不会保存在 localStorage 中，每次我单击第 11、12、13 时，代码只会覆盖第 10 个对象...按钮只会覆盖第 10 个对象的值，而不是使用 new 创建和保存新对象对象键，例如 11,12,13,14,...

我不明白我的代码有什么问题，因为它一直运行到第 10 个对象。

代码：

for (let i = 0; i < 19; ++i) {

    let btn = document.createElement('BUTTON');

    btn.addEventListener('click',function(e){
        e.stopPropagation();

        let newsList = localStorage,
        keys         = Object.keys(localStorage).sort(),
        match        = false,
        news         = {
            "title":info_array[i].title,
            "description":info_array[i].description
        };

        if (nl.length > 0) {

            // check if element exists in localStorage
            for(let n = 0; n < newsList.length; ++n){
                if (JSON.parse(newsList[keys[n]]).link == info_array[i].link) {
                    match = true;
                }
            }

            // if object is unique save in localStorage
            if (!match) {
                let key = (parseInt(keys.pop())+1).toString();
                localStorage.setItem(key,JSON.stringify(news));
            }
            
        }else{
            // if localStorage is empty add first object
            localStorage.setItem(0,JSON.stringify(news));
        }

    },{passive:true});

    html.appendChild(element);
}

Answer 1

是因为这一行：

keys = Object.keys(localStorage).sort()

具体来说，这个bug是由.sort()

引起的

字符串按字典顺序排序。所以你的钥匙是：

0, 1, 10, 2, 3, 4, 5, 6, 7, 8, 9

这个逻辑和

app, big, branch, cut, dig, eye, fig, gem

已排序。 branch 这个词出现在 big 之后，而不是 gem，因为它以 b 开头。同样 10 出现在 1 之后而不是 9 因为它以字母 1.

开头

当您弹出最后一个键并向其加 1 时，您将得到 10，因为最后一个键始终是 9。

Javascript localStorage 不工作它会覆盖对象

Javascript localStorage not working it overwrites object

javascript

local-storage