问题描述： 如何使用本地存储来保存待办事项清单，并且可以添加、编辑和删除任务？

解决方法： 以下是使用JavaScript和HTML5的本地存储来保存待办事项清单的示例代码：

HTML部分：

    


    
Todo List
    
    Add
    


    

JavaScript部分（script.js）：

// 从本地存储中获取待办事项列表
function getTasks() {
    var tasks = localStorage.getItem('tasks');
    if (tasks) {
        return JSON.parse(tasks);
    } else {
        return [];
    }
}

// 将待办事项列表保存到本地存储
function saveTasks(tasks) {
    localStorage.setItem('tasks', JSON.stringify(tasks));
}

// 显示待办事项列表
function showTasks() {
    var taskList = document.getElementById('taskList');
    taskList.innerHTML = '';

    var tasks = getTasks();
    for (var i = 0; i < tasks.length; i++) {
        var task = tasks[i];
        var li = document.createElement('li');
        li.innerHTML = task;
        taskList.appendChild(li);
    }
}

// 添加新任务
function addTask() {
    var taskInput = document.getElementById('taskInput');
    var task = taskInput.value.trim();
    if (task !== '') {
        var tasks = getTasks();
        tasks.push(task);
        saveTasks(tasks);
        showTasks();
        taskInput.value = '';
    }
}

// 编辑任务
function editTask(index, newTask) {
    var tasks = getTasks();
    tasks[index] = newTask;
    saveTasks(tasks);
    showTasks();
}

// 删除任务
function deleteTask(index) {
    var tasks = getTasks();
    tasks.splice(index, 1);
    saveTasks(tasks);
    showTasks();
}

// 页面加载完成后显示待办事项列表
window.onload = function() {
    showTasks();
};

上述代码中，我们使用了localStorage对象来保存和获取待办事项列表。通过调用getTasks()函数可以获取当前的待办事项列表，saveTasks()函数用来保存待办事项列表到本地存储。showTasks()函数用于将待办事项列表显示在页面上。

addTask()函数用于添加新的任务，editTask()函数用于编辑任务，deleteTask()函数用于删除任务。

在页面加载完成后，我们通过调用showTasks()函数来显示已保存的待办事项列表。

通过上述代码，你可以使用本地存储来保存待办事项清单，并进行添加、编辑和删除任务的操作。