javascript從存盤在本地存盤中的陣列中洗掉專案

我有一個添加任務的輸入欄位。當我添加任務時，每個任務旁邊都會出現一個洗掉按鈕，當我單擊洗掉按鈕時，這些任務作為陣列存盤在本地存盤中，我想洗掉特定專案而不是所有本地存盤

一般來說，我們使用 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>

如何從本地存盤中的陣列中洗掉特定專案并為用戶顯示新結果

uj5u.com熱心網友回復：

您需要從陣列中洗掉并再次存盤陣列，因為這就是您的其他部分的作業方式

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  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>

uj5u.com熱心網友回復：

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)
        });
    }
}

標籤：javascript html

上一篇：js從樣式代碼元素復制干凈的代碼

下一篇：我將如何在節點js中加載ogg檔案