javascript - removeItem localStorage 不起作用

Question

我想删除数组中的一项，但它没有被删除。我有元素的 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]);



});

Answer 1

您只有一个 localStorage 属性，即 “tasks”。

这个属性的值就是你字符串化的json。

在 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));