Question

我正在弄混JS和localStorage，创建了一个待办事项列表。单击列表中的项目时，它将更改其CSS类，并且应从localStorage中删除。该项目的价值由用户决定，因此我无法在

中进行硬编码

localStorage.removeItem('Do the dishes');

例如。

我尝试这样做：

localStorage.removeItem(ev.target.innerText);

（下面是较长的版本）。它不会给我一个错误，但也不会从localStorage中删除该项目。

var taskList = document.querySelector('ul');

taskList.addEventListener('click', function(ev) {
  if (ev.target.tagName === 'LI') {
    ev.target.classList.toggle('checked');

    let tasks;
    if(localStorage.getItem('tasks') === null ){

        tasks = [];

    }
    else {
        tasks = JSON.parse(localStorage.getItem('tasks'));  
        console.log("TaskList Is Not empty"); 

        tasks.forEach(function(task, index){
            if(ev.target.innerText === task){
                localStorage.removeItem(ev.target.innerText);
                console.log("Removed"); 
            } 
            else{
                console.log("Else Executed");
            }
        }

所有任务都添加到名为“任务”的localStorage项中：

function storeTaskInLocalStorage(newTask){
let tasks;
if(localStorage.getItem('tasks') === null ){
    tasks = [];
}else{
    tasks = JSON.parse(localStorage.getItem('tasks'));
}
tasks.push(newTask);
localStorage.setItem('tasks', JSON.stringify(tasks));
}

如前所述，项目应该从localStorage中删除，但事实并非如此。这可能是我的代码中的错误，但是我似乎无法在互联网上找到其他任何方式，因此任何帮助将不胜感激！

如果需要整个项目进行故障排除或其他任何事情，请让我知道，我可以将其上传到codePen或其他东西：）

Answer 1

那应该做的：

var taskList = document.querySelector('ul');

taskList.addEventListener('click', function (ev) {
  if (ev.target.tagName === 'LI') {
    ev.target.classList.toggle('checked');

    let tasks;
    if (localStorage.getItem('tasks') === null) {

      tasks = [];

    } else {
      tasks = JSON.parse(localStorage.getItem('tasks'));
      console.log('TaskList Is Not empty');

      const taskId = tasks.indexOf(ev.target.innerText);

      if (taskId !== -1) {
        tasks.splice(taskId, 1);

        localStorage.setItem('tasks', JSON.stringify(tasks));
      }
    }
  }
});

我希望tasks是一个字符串数组，用于存储待办事项-否则请告诉我，以便我修改代码。

Answer 2

设置和删除键之间有错误... 你尝试

localStorage.removeItem(ev.target.innerText);

您设置的密钥为：

localStorage.getItem('tasks')

您应该做的是编辑刚解析的数组，并在JSON字符串化后再次保存在同一键下，或者保存在不同的键下

Answer 3

您需要将其设置为

localStorage.setItem('taskName', 'Do the dishes');

然后您可以将其删除为

localStorage.removeItem('taskName');

如果您有一系列物品，可以做

const tasks= [];
task.push('Do the dishes');
task.push('Wash the car');
localStorage.setItem('taskName', JSON.stringify(task));

如何在不对值进行硬编码的情况下从字符串中删除localStorage值？

3 个答案: