浏览器localStorage实操问题：删除待办项未同步存储及firstElementChild疑问

1. 删除条目未同步localStorage的问题 #

问题原因 #

删除逻辑中仅更新了内存中的storedItems数组，没有把修改后的数组重新写入localStorage，刷新页面时浏览器会读取旧的存储数据，导致已删除的条目重新出现。

修复方法 #

在删除逻辑的末尾，添加一行将新数组写入localStorage的代码即可，修改后的删除代码如下：

/*Removing item*/
list.addEventListener('click', e => {
    console.log(e.target);
    if (e.target.classList.contains('delete')) {
        e.target.parentElement.remove();
        let removedItem = e.target.parentElement.firstElementChild.innerText;
        console.log(`${removedItem} has been removed from the html list`);
        console.log(storedItems)
        const newArr = storedItems.filter(item => item !== removedItem)
        console.log(newArr)
        storedItems = newArr
        // 新增下面这行，把更新后的数组存回localStorage
        localStorage.setItem('tasks', JSON.stringify(storedItems))
        console.log(`Local storage now contains ${storedItems} `)
    }
})

2. firstElementChild的作用说明 #

你生成的单条待办DOM结构如下：

<li>
    <span>待办内容</span>
    <i class="far fa-trash-alt delete"></i>
</li>

• 点击删除图标时，e.target是<i>标签，e.target.parentElement就是外层的<li>标签
• firstElementChild指的是元素的第一个子元素节点，这里<li>的第一个子元素就是存待办文本的<span>标签
• 用它可以直接拿到待办内容的文本，不需要额外用querySelector('span')去查找，写法更简洁高效。

内容的提问来源于stack exchange，提问作者Matteo