javascript从存储在本地存储中的数组中删除项目

Question

我有一个添加任务的输入字段。 当我添加任务时，每个任务旁边都会出现一个删除按钮，当我单击删除按钮时，这些任务作为数组存储在本地存储中，我想删除特定项目而不是所有本地存储

通常我们使用localStorage.removeItem(key);

 let inputTask = document.querySelector('.input'); let tasks = document.querySelector('.tasks'); let add = document.querySelector('.add'); let alls = []; //show tasks function show() { if (window.localStorage.task) { let storedTaskes = JSON.parse(localStorage.getItem("task")); storedTaskes.forEach((item) => { let paragraph = document.createElement('p'); let deleteBtn = document.createElement('button'); deleteBtn.className = "delete"; deleteBtn.innerHTML = "Delete"; deleteBtn.id = item; deleteBtn.setAttribute("onclick","deleteBtn(this)"); console.log(deleteBtn.value); paragraph.innerHTML = item; paragraph.appendChild(deleteBtn); tasks.appendChild(paragraph); }); } } // add tasks add.onclick = function () { if (inputTask.value.trim() !== "") { alls.push(inputTask.value); for (let i = 0; i < alls.length; i++) { window.localStorage.setItem(`task`, JSON.stringify(alls)); } } inputTask.value = ''; show(); } show(); //Delete Task function deleteBtn(ob) { let id = ob.id; let taskArray = JSON.parse(localStorage.getItem("task")); for(let i = 0; i < taskArray.length; i++){ if(taskArray[i] === id){ localStorage.removeItem(taskArray[i]); } } }

 body{ height: 90vh; display: flex; align-items: center; justify-content: center; } .container { display: flex; align-items: center; flex-direction: column; gap: 20px; } .form { background-color: #f0f0f0; padding: 20px; width: 500px; text-align: center; display: flex; align-item: center; justify-content: center; gap: 15px; } .input{ border: 0; outline: none; padding: 10px 20px; width: 300px; border-radius: 5px; } .add, .delete{ border: 0; outline: none; background-color: red; color: white; padding: 10px; border-radius: 5px; cursor: pointer; } .tasks { background-color: #f0f0f0; padding: 20px; width: 500px; } p { display: block; background-color: white; padding: 15px; border-radius: 5px; display: flex; align-items: center; justify-content: space-between; }

 <div class="container"> <div class="form"> <input type="text" class="input"> <input type="submit" class="add" value="Add Task"> </div> <div class="tasks"></div> </div>

如何从本地存储中的数组中删除特定项目并为用户显示新结果

Answer 1

您需要从数组中删除并再次存储数组，因为这就是您的其他部分的工作方式

function deleteBtn(ob) {
  let id = ob.id;
  let taskArray = JSON.parse(localStorage.getItem("task"));
  taskArray = taskArray.filter(item => item != id)
  localStorage.setItem("task", JSON.stringify(taskArray));
  show()
}

也变

for (let i = 0; i < alls.length; i++) {
  window.localStorage.setItem(`task`, JSON.stringify(alls));
}

到

localStorage.setItem(`task`, JSON.stringify(alls));

这是一个更好的版本

我使用委托进行删除并保存到本地存储，而无需再次阅读

我使用生成的 ID 作为 id

注意我必须注释掉 localstorage 部分，因为 SO 不允许它

 let inputTask = document.querySelector('.input'); let tasks = document.querySelector('.tasks'); let add = document.querySelector('.add'); let storedTasks // = localStorage.getItem("task"); // uncomment on your server let allTasks = storedTasks ? JSON.parse(storedTasks) : []; function show() { tasks.innerHTML = allTasks .map(task => `<p>${task.input} <button class="delete" data-id="${task.id}">X</button></p>`) .join('<br/>'); } // add tasks add.onclick = function() { const input = inputTask.value.trim(); if (input !== "") { const id = allTasks.length; // use the length at this time allTasks.push({ id:new Date().getTime(), input }); // localStorage.setItem("task",JSON.stringify(allTasks)); // uncomment on your server inputTask.value = ''; show(); } }; show(); document.querySelector(".tasks").addEventListener("click", function(e) { const tgt = e.target; if (tgt.classList.contains("delete")) { let id = tgt.dataset.id; allTasks = allTasks.filter(item => item.id != id) tgt.closest("p").remove(); // localStorage.setItem("task",JSON.stringify(allTasks)); // uncomment on your server } });

 body { height: 90vh; display: flex; align-items: center; justify-content: center; } .container { display: flex; align-items: center; flex-direction: column; gap: 20px; } .form { background-color: #f0f0f0; padding: 20px; width: 500px; text-align: center; display: flex; align-item: center; justify-content: center; gap: 15px; } .input { border: 0; outline: none; padding: 10px 20px; width: 300px; border-radius: 5px; } .add, .delete { border: 0; outline: none; background-color: red; color: white; padding: 10px; border-radius: 5px; cursor: pointer; } .tasks { background-color: #f0f0f0; padding: 20px; width: 500px; } p { display: block; background-color: white; padding: 15px; border-radius: 5px; display: flex; align-items: center; justify-content: space-between; }

 <div class="container"> <div class="form"> <input type="text" class="input"> <input type="submit" class="add" value="Add Task"> </div> <div class="tasks"></div> </div>

Answer 2

function deleteBtn({id}) {
  let taskArray = JSON.parse(localStorage.getItem("task")); // get the array

  taskArray = taskArray.filter(ob=> ob.id != id )  // remove the id 

  localStorage.setItem("task", JSON.stringify(taskArray));

  show()
}

但是由于您使用的是tasks.appendChild(paragraph)您必须将show函数更改为

//show tasks
function show() {
    if (window.localStorage.task) {
        let storedTaskes = JSON.parse(localStorage.getItem("task"));
        tasks.innerHTML = "" // here
        storedTaskes.forEach((item) => {
            let paragraph = document.createElement('p');
            let deleteBtn = document.createElement('button');
            deleteBtn.className = "delete";
            deleteBtn.innerHTML = "Delete";
            deleteBtn.id = item;
            deleteBtn.setAttribute("onclick","deleteBtn(this)");
            console.log(deleteBtn.value);
            paragraph.innerHTML = item;
            paragraph.appendChild(deleteBtn);
            tasks.appendChild(paragraph)
        });
    }
}