本地存储删除项目

Question

我有一个todo应用程序。代码是正确的，但是无法从本地存储中删除任务

function appendTaskToList(val) {
    $('#list').append($("<li id='task-' + i >  <a href='#' class='done-btn'>Done</a>" +" " + val + " <a href='javascript:void(0)' class='cancel-btn'>Delete</a></li>").data("erdem", "12"));
}
if (localStorage['tasks']) {
    var tasks = JSON.parse(localStorage['tasks']);
}else {
    var tasks = [];
}
for(var i=0;i<tasks.length;i++) {
    appendTaskToList(tasks[i]);
}
var addTask = function(){
    var val = $('#name').val();
    tasks.push(val);
    localStorage["tasks"] = JSON.stringify(tasks);
    appendTaskToList(val);
    $('#name').val("").focus();
};
localStorage.username = $('#add-btn').click(addTask);
$('#name').keyup(function(e){
    if (e.keyCode === 13) {
        addTask();
    }
});
$(document).delegate('.done-btn', 'click', function() {
    $(this).parent('li').addClass('done');
    return false;
});
$(document).delegate('.cancel-btn', 'click', function() {
    $(this).parent('li').remove();
    localStorage.removeItem($(this).parent('li').remove());
});

请帮助我，抱歉我的英语不好

Answer 1

本地存储的removeItem()方法，当传递一个密钥名称时，将从存储中删除该密钥。

对于代码，您可以从li中提取任务的名称，然后使用它来更新任务数组，然后更新本地存储tasks值。

对于你的代码:

//extract task name from the li element
var nameOfTask = $(this).parent('li').clone().children().remove().end().text().trim();
//find index in the task element
var index = tasks.indexOf(nameOfTask);
tasks.splice(index,1);
localStorage["tasks"] = JSON.stringify(tasks);

请参阅ref: 'https://jsfiddle.net/bhtvt1c3/1/'