javascript - 为什么 localStorage getItem 只显示数组的第一项？

Question

我正在使用 localStorage 通过使用 innerHTML 将包含 fa-check-circle 图标的 div 转换为字符串，然后将结果推送到数组并将该数组保存到 localStorage 中来将检查的项目保存在待办事项列表中。但是，我在使 localStorage.getItem() 显示保存的检查和换行文本时遇到问题，它只正确显示第一个而忽略其余的。这个想法是挑战自己，通过以不同的方式使用 localStorage，到目前为止，数组正确推送，localStorage 正确保存，控制台没有错误，但只显示第一个。我究竟做错了什么？我觉得也许我只需要抓住并显示最后一个键？这个应用程序与 mongodb 相关联，如果有帮助的话，使用 ejs 表达后端。我在下面附上了代码、控制台日志和 localStorage 信息。

// main.js file

const check = document.querySelectorAll('i.check');
const uncheck = document.querySelectorAll('i.uncheck');
const li = document.querySelectorAll('li');
var savedChecks;
var myArr = [];


// Check-off Items 
for(let i = 0; i < uncheck.length; i++) {
    uncheck[i].addEventListener('click', (e) => {       
        if(e.target.classList.contains('uncheck')) {
            check[i].className = 'fas fa-check-circle check';
            check[i].style.display = 'block';
            uncheck[i].className = 'fas fa-check-circle check';
            li[i].style.textDecoration = 'line-through';
            editBtn[i].style.display = 'none';


        }
        savedChecks = document.querySelector('.savedList').innerHTML;
        myArr.push(savedChecks);
        localStorage.setItem('checkedItems'+ new Date().getTime(), JSON.stringify(myArr));
    })
};

                   //Code to grab each key and display back to .savedList

    Object.keys(localStorage).forEach(function(key){
        document.querySelector('.savedList').innerHTML = JSON.parse(localStorage.getItem(key)) || [];
        document.querySelector(".editBtn").innerHTML = '';
        document.querySelector('li').style.textDecoration = 'line-through';
     });

// EJS code

                <ul id="list">
                        <% for(let i = 0; i < list.length; i++) {%>
                                <li class="list-item">
                                    <span class="savedList"> <!-- Save to localStorage -->
                                    <div class="checkbox">
                                        <span id="circleIcon"><i class="far fa-circle uncheck"></i></span>
                                        <span id="checkIcon"><i class="fas fa-check-circle check"></i></span>
                                    </div>
                                    </span>   

                                    <span class="editText"><%= list[i].item %></span>
                                    <div class="buttons">
                                        <button type="submit" data-update="<%= list[i]._id %>" class="saveBtn"><i class="fas fa-edit"></i></button>
                                        <button type="button" onclick="window.location.reload()"class="cancelBtn">X</button>
                                        <button type="button" data-update="<%= list[i]._id %>" class="editBtn"><i class="fas fa-edit"></i></button>
                                        <button type="button" data-delete="<%= list[i]._id %>" class="delItemBtn"><i class="fas fa-trash-alt"></i></button>   
                                    </div>                
                                </li>  
                        <% } %>
                    </ul> 

阵列的控制台日志阵列 的控制台日志 - 显示保存在阵列内部

本地存储的控制台日志本地存储 的控制台日志 - 显示保存在本地存储内部

本地存储本身显示已 正确保存的密钥 localStorage 显示正确保存密钥，但无法正确抓取和显示？

************* 更新 ************ 看来这实际上可能不是 localStorage 问题，而是我尝试显示结果的方式本地存储。我手动将最后一个键添加到 getItem() 并注意到在同一元素上弹出 2 个检查，因此我将尝试弄清楚如何使检查 localStorage 键显示在正确的单独元素上。与尝试在 .savedList 元素中显示有关，它们重新出现在第一个元素中，而不是目标中的多个元素。我在下面附上了一张新照片，显示了显示 localStorage 的最后一个键的结果......

标签： javascripthtmlarrayslocal-storageejs