如何从 LocalStorage 中删除特定项目答案

【问题标题】：How can i delete specific item from LocalStorage如何从 LocalStorage 中删除特定项目
【发布时间】：2018-07-31 07:30:56
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript local-storage

【解决方案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));
    });

}

【讨论】：

它将删除所有内容。我们不能这样做。
@ÖmerDoğan 你说的一切都是什么意思？它只会删除 localStorage 中具有特定键的项目
@ÖmerDoğan 在您的实现中，您必须使用localStorage.getItem() 获取数组，从中删除带有指定ID 的todo，并在同一个@987654330 上使用localStorage.setItem(); 写入新数组@键。
是的，它确实是描述性的，但本地存储真的很复杂。我无法理解。 :(
是的。这一次发生了，我认为这是这个项目的好方法。谢谢。

【解决方案2】：

在您的点击处理程序中，您还必须获取已解析的本地存储值，然后调用 splice(index, 1) 将条目号作为“索引”传递。

类似...

$('#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);

【讨论】：

是的！这就是我想要的伙计。但没有用。它无法正常工作。一些卡片出错了。
是的。我认为使用对象而不是数组进行存储会使其更好地工作。使用comment.id 作为键，然后在您的点击处理程序中“删除存储[comment.id]”而不是拼接。

【解决方案3】：

localStorage.removeItem(key);

根据需要更换密钥

【讨论】：

如果我这样做将删除所有值。
不，它会删除特定的键
但我的情况是一个数组中的所有值。如果我使用这种方法，一切都会被删除。
那么你能给出你的数组的数据结构吗
请使用类似 localStorage.removeItem(yourArray['speciic_key']);

【解决方案4】：

所有答案都很好。你怎么也可以这样做：

localStorage[key] = undefined;

由于 localstorage 是一个键值对象

【讨论】：