试图从 Javascript 中的 localStorage 数组中删除特定项目

Question

我在删除 Javascript 待办事项列表应用程序的 localStorage 数组中的特定项目时遇到问题。

输入输入值后，使用 localStorage.setItem("myList", JSON.stringify(myList)) 将值推送到 myList 数组和本地存储。

用户可以通过单击旁边的删除按钮从屏幕中删除一个项目，但是当页面刷新时，该项目仍然出现。 这是因为本地存储中的项目没有被删除。

当用户单击该项目旁边的删除按钮时，如何将其从本地存储阵列中删除？

let myList = []

const submitBtn = document.getElementById("submit-btn");
const clearListBtn = document.getElementById("clearList-btn");
const inputEl = document.getElementById("input-btn");
const olEl =  document.getElementById("ol-el");
const doneBtn =  document.getElementById("done-btn");

const leadFromLocalStorage = JSON.parse(localStorage.getItem("myList"))

if (leadFromLocalStorage) {  
    myList = leadFromLocalStorage;
    render(myList);
}

function render(leads) {
    let listItems = " ";
    for ( let i = 0; i < leads.length; i++) {
        listItems +=  
            `<li id = " ">
                ${leads[i]} <button id= "done-btn" onclick = "deleteButton(${i})">X</button>
            </li>
            `;
        }
    olEl.innerHTML = listItems;
}

submitBtn.addEventListener("click", function() {
    myList.push(inputEl.value);
    inputEl.value = " ";
    localStorage.setItem("myList", JSON.stringify(myList))
    render(myList);
})

clearListBtn.addEventListener("click", function() {
    localStorage.clear();
    myList = [];
    render(myList)
})

function deleteButton(index) {
    myList.splice(index, 1);
    render(myList);
}



<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="index.css">
    </head>

    <body>
        <div class="box">
            <p>To-Do List</p>
            <input value = "Add an item!" id = "input-btn">
            <button id = "submit-btn">submit</button>
            <button id = "clearList-btn">clear list</button>
            <ol id="ol-el"></ol>
            <script src = "index.js"></script>
        </div>
    </body>

</html>

Answer 1

在您的deleteButton function 中，您可以在拼接数组之后添加一行，以将您的列表与localStorage中的列表同步。

localStorage.setItem("myList", JSON.stringify(myList));

试图从 Javascript 中的 localStorage 数组中删除特定项目

问题描述

1 个解决方案

解决方案1
0 2022-08-09 00:16:15

试图从 Javascript 中的 localStorage 数组中删除特定项目

问题描述

1 个解决方案

解决方案1 0 2022-08-09 00:16:15

解决方案1
0 2022-08-09 00:16:15