当有人单击“垃圾箱”图标时，如何删除特定的 localStorage，它会在前端而不是本地删除它

Question

我有这个

const addForm = document.querySelector('.add')
const list = document.querySelector('.todos')
const search = document.querySelector('.search input')
let itemsArray = localStorage.getItem('items') ? 
JSON.parse(localStorage.getItem('items')) : []

localStorage.setItem('items', JSON.stringify(itemsArray))
const data = JSON.parse(localStorage.getItem('items'))


function noenter() {
    return !(window.event && window.event.keyCode == 13); }

这就是我最初的样子

list.addEventListener('click', e => {

    if(e.target.classList.contains('delete')) {
        e.target.parentElement.remove()
        localStorage.removeItem(itemsArray[0]) // I'm trying this but doesn't do anything....
        console.log(localStorage.get) // left off need to remove storage
    }

})

最初，当您单击删除图标时，它将删除 class 的父级，这就是它从 web 临时文件中删除它的方式，但它从未实际保存，也就是存储它。 我现在正在尝试添加 function。

Answer 1

如果我正确理解了您的问题和代码，您应该在不删除应删除的项目的情况下重建itemsArray ，并将其存储回 localStorage，例如：

const itemsArray = JSON.parse(localStorage.getItem('items')); // get data from LS
itemsArray.splice(0, 1); // remove the item on position 0
localStorage.setItem('items', JSON.stringify(itemsArray)); // save it back to LS

在您的代码中，对localStorage.removeItem(itemsArray[0])的调用试图从localStorage和索引为itemsArray[0]值的项目中删除。 该项目不太可能存在，这就是您的代码无效的原因。