如何为浏览器创建本地存储的任务？

Question

我正在尝试将已创建的任务保存到用户在浏览器中的本地存储中。是否也可以告诉我如何让删除按钮删除创建的任务？

/************************************
 * creates an object of elements needed *
 ************************************/
 
 const elements = {
    form: document.querySelector("#new-task-form"),
    input: document.querySelector("#new-task-input"),
    list: document.querySelector("#tasks"),
    cal: document.querySelector("#calendar")
}

/****************************
 * Generates an ID for task *
 ****************************/

 const createId = () => `${Math.floor(Math.random() * 10000)}-${new Date().getTime()}`

/**********************************************
 * function that creates the HTML elements    *
 **********************************************/

 const createTask = () => {
    const id = createId()
    const task = elements.input.value;
    const date = elements.cal.value;

    if(!task && !date) return alert("Please fill in task and select date");
    if(!task) return alert("Please fill in task");
    if(!date) return alert("Please select date");

    const tasks = document.createElement("div");

    tasks.innerHTML = `
    <button class = "sort">Sort</button>
    <div class="task" data-id = "${id}">
        <div class="content">
            <input type ="checkbox" class="tick">
            <input type ="text" class = "text" id = "text" value="${task}" readonly>
            <label class = "due-date" for ="text">${date}</label>
            <input type ="date" class = "date" id = "date">
        </div>

        <div class = "actions">
            <button class="edit" data-id="${id}">Edit</button>
            <button class="delete" data-id="${id}">Delete</button>
        </div>
    </div>
    `
    elements.list.appendChild(tasks)
    listen()
    return tasks

}


/********************************************
 * Marks tasks as complete with checkbox    *
 ********************************************/

function listen(){
    let allCheckboxes = document.querySelectorAll('.tick')
    allCheckboxes.forEach(checkbox =>{
        checkbox.addEventListener('change',(e)=>{
            let parentElem=e.target.parentElement

            if(e.target.checked){
                parentElem.style.textDecoration = "line-through"
            }
            else{
                parentElem.style.textDecoration = "none"
            }
        });
    });
}

/**************************************************************
 * Event that listens for the edit,save and delete buttons    *
 **************************************************************/
elements.list.addEventListener('click',event => {
    const {target} = event;
    const {id} = target.dataset;
    const task = id ? document.querySelector(`[data-id="${id}"]`):null;  

    const type = {
        edit: event.target.classList.contains('edit'),
        delete: event.target.classList.contains('delete')
    }

    const isFromSaveLabel = target.innerText.toLowerCase() === 'save'

    //Checking to see if buttons are pressed

    if(task && type.edit && isFromSaveLabel){
        const text = task.querySelector('text')
        target.innerText = 'Edit'
        text.setAttribute('readonly', true)
        return
    };

    if(task && type.edit){
        const text = task.querySelector('text')
        target.innerText = 'save'
        text.removeAttribute('readonly')
        text.focus()
        return
    };

    if(task && type.delete){
        
        return
    }
    
});

/*******************************************************************
 * Submits the HTML elements to have the lists submited and created*
 *******************************************************************/

 const submitHandler = (event) =>{
    event.preventDefault();
    createTask();
}


elements.form.addEventListener("submit", submitHandler);

我想要实现的最终结果是将创建的列表本地存储，这样如果页面刷新，任务仍然存在。并在单击删除按钮时删除任务

您可以在这里找到 jsfiddler：https://jsfiddle.net/blaze92/seLvzd1h/2/

Answer 1

我过去做过完全相同的项目 My Project。那么你如何做到这一点可以像下面这样：

因为您已经有了创建任务的方法createTask。以某种方式修改此函数，以便您可以传递自定义参数。这允许您创建一种方法，将本地存储中的注释添加到您的页面。
Then You Need To Take All The Tasks 使用 document.getElementByClassName 或 document.getElementByID 获取他们的信息，然后将其添加到 JSON Object/Array.
然后您可以使用 JSON.Stringify 将此 JSON Object/Array 转换为字符串。现在您可以使用 localStorage.setItem()
现在您可以添加事件侦听器来检测页面加载，然后从本地主机获取此字符串作为 localStorage.getItem()，然后将其转换回 JSON 对象。
然后创建一个遍历此 object/array 的所有元素的 For 循环，并使用对象中的参数调用 createTask 方法。

如何为浏览器创建本地存储的任务？

How do I make the Tasks that are created local storage for the browser?

javascript

local-storage