removeItem localStorage不起作用

时间:2015-07-21 14:58:12

标签: javascript jquery local-storage

我想删除数组中的项目,但不会删除它。我有项目的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]);



});

1 个答案:

答案 0 :(得分: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));