JavaScript如何删除localStorage存储的数组内的指定元素并更新页面

现有代码核心问题 #

• 你所有任务是序列化后统一存储在localStorage的task字段中，不是每个任务单独作为key存储，原有删除逻辑调用localStorage.removeItem(taskArray[i])完全是操作了不存在的key，不会修改你存储的任务数组。
• show函数每次调用时没有清空旧的任务列表，会导致任务重复渲染。
• 全局alls数组没有和localStorage存储的内容同步，容易出现数据不一致。
• 添加任务时循环写入localStorage属于冗余逻辑，没有实际作用。

修正后的完整JS代码 #

let inputTask = document.querySelector('.input');
let tasks = document.querySelector('.tasks');
let add = document.querySelector('.add');
let alls = [];

// 初始化时同步localStorage数据到alls
if (window.localStorage.getItem('task')) {
  alls = JSON.parse(localStorage.getItem('task'))
}

//show tasks
function show() {
    // 先清空现有任务，避免重复渲染
    tasks.innerHTML = ''
    alls.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)");
        paragraph.innerHTML = item;
        paragraph.appendChild(deleteBtn);
        tasks.appendChild(paragraph);
    });
}

// add tasks
add.onclick = function () {
    if (inputTask.value.trim() !== "") {
        alls.push(inputTask.value);
        // 直接写入最新的alls数组，不需要循环
        window.localStorage.setItem('task', JSON.stringify(alls));
    }
    inputTask.value = '';
    show();
}

show();

//Delete Task
function deleteBtn(ob) {
    let targetTask = ob.id;
    // 过滤掉要删除的任务，生成新数组
    alls = alls.filter(item => item !== targetTask)
    // 把新数组写回localStorage
    localStorage.setItem('task', JSON.stringify(alls))
    // 重新渲染任务列表
    show()
}

补充说明 #

如果存在任务内容重复的场景，建议给每个任务生成唯一ID（比如时间戳+随机数）作为标识，避免删除时误删内容相同的其他任务。

内容的提问来源于stack exchange，提问作者Mohamad