javascript - javascript中的待办事项列表

Question

我正在用 javascript 构建一个 Todo 应用程序，我面临 3 个问题：
1. 在勾选列表时在 input 元素上设置选中的属性。
<input type="checkbox" value="Go to Gym">
这个说法有错吗？

checkbox.checked = data.status;

2）使用会话存储数据。

if(sessionStorage['task'] != null)

3) 项目的状态（即选中或未选中）未能在 UpdateJSON 函数中的 dataJSON 对象中更新。

function updateJSON(event) {
    let key = event.target.value;
    dataJSON[key].status = event.target.checked;
    sessionStorage['task'] = JSON.stringify(dataJSON);
}

var output = document.querySelector('#output'),
    taskList = document.querySelector('#taskList'),
    html = '',
    dataJSON='';
    document.querySelector('#myForm').addEventListener('submit', function(e) {
        e.preventDefault();
        var userInput = document.querySelector('input[name="task"]'),
        tempValue = userInput.value;
        console.log(tempValue);
        userInput.value = '';
        console.log(dataJSON);
        addNewElement({"info": tempValue,"status": false})
    });

    //console.log(data);
    window.onload = function(){
        if(sessionStorage['taskList'] != null){
            dataJSON = JSON.parse(sessionStorage['task']);
        } else {
            var data = '[{"info":"Cut Grass","status":true},{"info":"Clear Roo","status":false},{"info":"Go to Gym","status":true},{"info":"Make dinner","status":false}]';
            dataJSON = JSON.parse(data);
        }
        buildCheckboxesData(dataJSON);
    };

    function addNewElement(data) {
        addCheckbox(data, data.length);
        dataJSON.push(data);
    }
    function addCheckbox(data, key) {
        var li = document.createElement('li');
        var checkbox = document.createElement('input');
        var textNode = document.createTextNode(data.info);
        checkbox.type = 'checkbox';
        checkbox.value = data.info;
        checkbox.checked = data.status;
        checkbox.onchange = updateJSON;
        li.appendChild(textNode);
        li.appendChild(checkbox);
        taskList.appendChild(li);
    }

    function buildCheckboxesData(data){
        for(let key in data){
            addCheckbox(data[key], key)
         }
    }


    function updateJSON(event) {
        let key = event.target.value;
        dataJSON[key].status = event.target.checked;
        sessionStorage['taskList'] = JSON.stringify(dataJSON);
    }

<div id="output">
    <ul id="taskList"></ul>
</div>
<form id="myForm" action="">
    Task: <input type="text" name="task" placeholder="add task">
    <button type="submit">Add new Task</button>
</form>

标签： javascriptjson