Question

我在这里遇到问题。我需要创建一个包含以下规范的待办事项列表：它应该具有列表，表单和本地存储组件，如下所述。列表组件的职责是：

附加到HTML中的list元素。

在正在运行的网络应用中维护有效的待办事项列表。

绘制待办事项清单。

添加或删除新项目时重绘列表。

与存储服务交互以在启动时从浏览器的本地存储中检索待办事项列表，并在其发生变化时将待办事项列表保存到浏览器的本地存储中。

表单组件的职责是：

附加到HTML中的list-form元素。

绘制表单，输入和提交按钮。

通过与列表组件交互提交表单时，将新项添加到待办事项列表。

添加新的待办事项后，清除输入，允许输入新项目。

本地存储组件的职责是：

提供在浏览器的本地存储中存储和检索待办事项列表的方法。我已经厌倦了以下代码：

function get_todos() {
    var todos = new Array;
    var todos_str = localStorage.getItem('todo');
    if (todos_str !== null) {
        todos = JSON.parse(todos_str); 
    }
    return todos;
}

//local storage

function add() {
    var task = document.getElementById('task').value;

    var todos = get_todos();
    todos.push(task);
    localStorage.setItem('todo', JSON.stringify(todos));

    show();

    return false;
}

function remove() {
    var id = this.getAttribute('id');
    var todos = get_todos();
    todos.splice(id, 1);
    localStorage.setItem('todo', JSON.stringify(todos));

    show();

    return false;
}
//local storage
function show() {
    var todos = get_todos();

    var html = '<ul>';
    for(var i=0; i<todos.length; i++) {
        html += '<li>' + todos[i] + '<button class="remove" id="' + i  + '">x</button></li>';
    };
    html += '</ul>';

    document.getElementById('k').innerHTML = html;
    //document.getElementsByTagName("list");

    var buttons = document.getElementsByClassName('remove');
    for (var i=0; i < buttons.length; i++) {
        buttons[i].addEventListener('click', remove);
    };
}

document.getElementById('add').addEventListener('click', add);
show();

我需要你的协助。

仅在javascript中创建待办事项列表

0 个答案: