javascript - JS 使用 localstorage 删除 Todolist 中的项目。它按顺序删除索引（0、1、2、3、4）当我点击它时如何指定我的删除项目？

Question

新手在这里......在javascript中使用我的deleteItem函数时

假设我添加了一个列表项 1、2、3、4，在我的 localStorage 中它将等于 [1、2、3、4] 的数组

因此，当我单击删除按钮时，可以说要删除 3 号。

发生的情况是 3 将在“页面”中删除，但不会在我的 localStorage 中删除

localStorage 显示 [2, 3, 4] （删除 1 而不是 3）

它应该是 [1, 2, 4]

并且当点击页面刷新时..页面中的列表项将更改为 2, 3, 4 等于 localStorage

这意味着它总是按顺序删除第一个数组，直到最后一个数组

    const add = document.getElementById("additem")
    const remove = document.getElementById("removeitem")
    const input = document.getElementById("inputBlank")
    const contain = document.getElementById("container")

    const LOCAL_STORAGE_PREFIX = "TODO_APP_V1"
    const TODOS_STORAGE_KEY = `${LOCAL_STORAGE_PREFIX}- todos`
    let todos = loadTodos() // Load from local storage


    /// Appending all
    add.addEventListener('click', function (e) {
        e.preventDefault()
        let btn = document.createElement('button');
        let paragraph = document.createElement("th");
        btn.innerText="x";
        btn.style.background="";
        paragraph.innerText = input.value;
        if (input.value === "") return alert("Write text in the blank field")
        todos.push(paragraph.innerText)
        input.value = "";
        paragraph.appendChild(btn);
        contain.appendChild(paragraph)
        saveTodos()

        btn.addEventListener('click', function () {
            deleteItem(todos) // calling delete function for localstorage
            contain.removeChild(paragraph)
        })  
        remove.addEventListener('click', function () {
            localStorage.removeItem(TODOS_STORAGE_KEY)
        })
    })

    ///Saving to local storage
    function saveTodos() {
        localStorage.setItem(TODOS_STORAGE_KEY, JSON.stringify(todos))
    }

    //Getting from local storage
    function loadTodos() {
        const todos = localStorage.getItem(TODOS_STORAGE_KEY)
        return JSON.parse(todos) || []
    }

///for localstorage
    todos.forEach((element) => {
        let paragraph = document.createElement("th");
        paragraph.innerText = element;
        let btn = document.createElement("button");
        btn.innerText = "x";
        btn.style.background="";
        paragraph.appendChild(btn);
        contain.appendChild(paragraph);

        btn.addEventListener('click', function () {
            deleteItem(todos) // calling delete function for localstorage
            contain.removeChild(paragraph)
        })
        
        remove.addEventListener('click', function () {
            localStorage.removeItem(TODOS_STORAGE_KEY)

        })

    });

///delete function
    function deleteItem(index) {
        let todos = JSON.parse(localStorage.getItem(TODOS_STORAGE_KEY))
        todos.splice(index, 1) 
        localStorage.setItem(TODOS_STORAGE_KEY, JSON.stringify(todos)) 
    } 

标签： javascriptarraysstoragelocal