localStorage 未正确保存

Question

我正在尝试将选中的列表项保存到一个数组中并保存到 localStorage，如果您按顺序检查第一个项目，它会很好。但是，如果您检查除第一项之外的任何其他项目，例如第二项或第三项，则只有第一项会保存到本地存储中。我需要能够保存单击的任何项目，而不是总是将列表项定位为 [0]。

下面的代码将所有内容保存到数组的位置 [0]。因此，单击第一项将在位置 [0] 中起作用，但单击第二项也会保存位置 [0] 而不是位置 [1]。

const savedChecks;
const myArr = [];

savedChecks = document.querySelector('.saved-list-item').innerHTML;
myArr.push(savedChecks);

localStorage.setItem('checkItems'+ new Date().getTime(), JSON.stringify(myArr);

然后我尝试了这个，但是这段代码给出了相同的结果，仅保存在位置 [0]，但由于我添加了 [0]，因此预计会这样做，但我认为循环键可能会在位置 [0] 处显示所有内容]:

localStorage.setItem('checkItems'+ new Date().getTime(), JSON.stringify([...myArr][0]);

我通过 localStorage 循环并显示结果如下：

for(let i = 0; i < localStorage.length; i++) {
    if(localStorage !== null) {
        document.querySelector('#savedList').innerHTML += JSON.parse(localStorage.getItem(localStorage.key(i)));
    }
}

Answer 1

使用querySelectorAll() 获取所有匹配选择器的元素。

let savedItems = document.querySelectorAll('.saved-list-item');
let myArr = Array.from(savedItems).map(el => el.innerHTML);
localStorage.setItem('checkItems'+ new Date().getTime(), JSON.stringify(myArr);

并确保选择器只匹配选中的项目。您可以使用事件侦听器在项目被选中和取消选中时添加和删除另一个类，然后选择它。

Answer 2

在阅读了此处有用的 cmets 后，我知道我做错了什么，如果其他人看到此问题，这里是解决此问题的最终解决方案。我已经标记了编辑。

let savedChecks;
let myArr = [];

savedChecks = document.querySelectorAll('.saved-list-item'); /*<--Here use querySelectorAll as stated by others in the comments*/

savedChecks = savedChecks[i].innerHTML; /*<-- Here loop through the savedChecks */

myArr.push(savedChecks);

localStorage.setItem('checkItems'+ new Date().getTime(), JSON.stringify(myArr));