时间戳

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

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

问题描述

我有这个

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
    }

})

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

标签： javascriptlocal-storagebackendweb-frontend

解决方案

如果我正确理解了您的问题和代码，您应该在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]。该项目不太可能存在，这就是您的代码无效的原因。

推荐阅读