javascript - 如何从 LocalStorage 中删除特定项目

Question

我的本​​地商店中有很多有值(value)的内容，我想删除其中一些。当我点击我创建的动态卡时，它应该被正常删除和本地删除。我正常可以删除它，但无法从本地删除它。

本地存储事件非常困惑，并且没有很多解释资源。至少我找不到它。已经感谢您的帮助。

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

}