How can I remove only selected items from LocalStorage?

user_10081238 0
Viewed 28

How can I remove only selected items from LocalStorage?

I created a button to cancel the task. But when I click on it all other tasks are deleted.

const tasks = [];

btn.addEventListener("click", addTask);

function createLi(value) {
  tasks.push(value);

  let li = document.createElement("li");
  li.appendChild(document.createTextNode(value));
  container.appendChild(li);

  let deleteButton = document.createElement("button");
  deleteButton.innerText = "\u00D7";
  li.appendChild(deleteButton);

  deleteButton.addEventListener("click", deleteTask);
}

// ADD A TASK
function addTask() {
  createLi(input.value);
  localStorage.setItem("task", JSON.stringify(tasks));
}

function deleteTask() {
  localStorage.removeItem("task");
}

JSON.parse(localStorage.getItem("task")).forEach((task) => {
  createLi(task);
});
<input type="text" id="input">
<button id="btn">SEND</button>
<ul id="container">

</ul>

html javascript
1 Answers

LocalStorage stores key-value pairs in a Storage object, so when you call setItem(), it's akin to updating the key-value pair with key = task. Think of it like:

localStorage = { "task": "[task1, task2, task3, ...]" }

But when you call removeItem(), it removes the entire key-value pair from LocalStorage, so when you later call localStorage.getItem("task"), it's going to return a null value.

What your deleteTask() function needs to do is still call setItem(), but update the tasks array written to LocalStorage, so it doesn't contain the task you're deleting. Something like:

function deleteTask(taskToDelete) {
  const tasks = localStorage.getItem("task");
  const updatedTasks = task.filter(task => task != taskToDelete);
  localStorage.setItem("task", updatedTasks);
}

You still want a value returned in localStorage.getItem("task"), but the returned value is changing depending on which tasks have been added or removed.

user_129706230
Related