如何从LocalStorage中删除特定项目

Question

我的本地商店中有很多价值，我想删除其中的一些。当我点击我创建的动态卡时，它应该被正常和本地删除。我通常可以删除它，但我不能从本地删除它。

本地存储事件非常混乱，没有太多的解释性资源。至少我找不到它。已经感谢你的帮助了。

This is codepen

​

$('#field').keypress(function (e) {
    if (e.keyCode === 13 && !e.shiftKey) {
        e.preventDefault();

        if ($('#field').val() === '') return false;

        let comment = {
            card: $('#field').val(),
            id: generateGUID()
        };
        $('#field').val('')
        var store = JSON.parse(localStorage.getItem('todo')) || [];
        store.push(comment);
        localStorage.setItem('todo', JSON.stringify(store));
        $(this).val('');
        displayComment(comment);
    }
});

function displayComment(comment) {
    var html = $(`<div class="card" data-id="${comment.id}"><h5>${comment.card}</h5></div>`);
    $('.yorum').append(html);

    $('.yorum').find(html).click(function () {
        $(html).remove();
    });

}


var store = JSON.parse(localStorage.getItem('todo')) || [];
store.forEach(displayComment);

​

Answer 1

尝试使用localStorage对象的localStorage.removeItem('ITEM_NAME')方法。

以下是在localStorage中创建、获取和移除项的示例

localStorage.setItem('aaa','1231')  //undefined
localStorage.getItem('aaa')         //"1231"
localStorage.removeItem('aaa')      //undefined
localStorage.getItem('aaa')         //null

以下是针对您的案例的代码示例：

function displayComment(comment) {
    var html = $(`<div class="card" data-id="${comment.id}"><h5>${comment.card}</h5></div>`);
    $('.yorum').append(html);

    $('.yorum').find(html).click(function () {
        $(html).remove();
        var arr = JSON.parse(localStorage.getItem('todo'));
        for(var i=0;i<arr.length;i++)
          {
            if(arr[i].id=this.getAttribute('data-id'))
            {
              arr.splice(i,1);
              break;
            }
          }
        localStorage.setItem('todo', JSON.stringify(arr));
    });

}

Answer 2

localStorage.removeItem(key);

根据需要更换密钥

Answer 3

在您的click处理程序中，您还必须获取解析后的本地存储值，然后调用splice(index，1)，将条目编号作为"index“进行传递。

就像这样..。

​

$('#field').keypress(function (e) {
    if (e.keyCode === 13 && !e.shiftKey) {
        e.preventDefault();

        if ($('#field').val() === '') return false;

        let comment = {
            card: $('#field').val(),
            id: generateGUID()
        };
        $('#field').val('')
        var store = JSON.parse(localStorage.getItem('todo')) || [];
        store.push(comment);
        localStorage.setItem('todo', JSON.stringify(store));
        $(this).val('');
        displayComment(comment, store.length-1);
    }
});

function displayComment(comment, index) {
    var html = $(`<div class="card" data-id="${comment.id}"><h5>${comment.card}</h5></div>`);
    $('.yorum').append(html);

    $('.yorum').find(html).click(function () {
        $(html).remove();
        var store = JSON.parse(localStorage.getItem('todo')) || [];
        store.splice(index, 1);
        localStorage.setItem('todo', JSON.stringify(store));
    });

}


var store = JSON.parse(localStorage.getItem('todo')) || [];
store.forEach(displayComment);

​