removeItem localStorage 不起作用

removeItem localStorage does not work

我想删除数组中的一项,但它没有被删除。我有物品的 ID,但我不能使用它。你能告诉我如何使用 tasks 数组中的项目 ID 吗?

function appendTaskToList(val, task_id) {
    $('#list').append($("<li>  <a href='#' class='done-btn'>Done</a>" +
        " " + val + " <a href='javascript:void(0)' class='cancel-btn'>Delete</a></li>")
    .data("task", task_id));
}

if (localStorage['tasks']) {

    var tasks = JSON.parse(localStorage['tasks']);
    for(var i=0;i<tasks.length;i++) {
        appendTaskToList(tasks[i], i);
    }

}else {

    var tasks = [];
}

var addTask = function(){
    var val = $('#name').val();
    tasks.push(val);
    var task_id = tasks.indexOf(val);
    localStorage["tasks"] = JSON.stringify(tasks);
    appendTaskToList(val, task_id);
    $('#name').val("").focus();
};

$('#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(e) {
    var task_elem = $(e.target).closest("li");

    console.log(task_elem.data());
    var taks_id = task_elem.data();
    $(this).parent('li').remove();

    localStorage.removeItem(tasks[taks_id]);



});

您只有一个 localStorage 属性,即 "tasks"

这个属性的值是json你的stringify。

在行 localStorage.removeItem(tasks[taks_id]);tasks[taks_id] 的值不是 "tasks"

因此您希望删除 localStorage 中根本不存在的内容

您需要做的是从 tasks javascript 数组中删除项目,然后再次将修改后的数组保存到 localStorage。

假设task_id是数组中的索引:

//remove from array
tasks.splice(task_id,1);
//store again
localStorage.setItem('tasks',JSON.stringify(tasks));