如何从 LocalStorage onClick 中仅删除一项？答案

【问题标题】：How to remove only one item from the LocalStorage onClick?如何从 LocalStorage onClick 中仅删除一项？
【发布时间】：2019-10-29 04:50:35
【问题描述】：

我只想在单击操作时从本地存储中删除一项，但这不起作用，当我选择删除一项时，所有值都将被删除。

我创建了一个 deleteItem 函数

deleteItem = (ev) => {
        let nums = localStorage.removeItem('myNums');
        let arr = [];
        if(nums){
            arr = JSON.parse(nums);
            arr.push(this.state.num);
            arr = Array.from(new Set(arr));
            localStorage.removeItem('myNums', JSON.stringify(arr));
        }else{
            arr=[];
            arr.push(this.state.num);
            localStorage.removeItem('myNums', JSON.stringify(arr));
        }
        this.setState({isSaved:true});

为了执行我的功能，我在点击按钮时调用它：

<button onClick={this.deleteItem}>Delete this card</button>

此按钮可用于我的列表的每个值，假设我有 1、2 和 3，当我单击删除项目 3 时，我丢失了三个值。

【问题讨论】：

标签： reactjs local-storage

【解决方案1】：

LocalStorage 是一个键值存储，如果您删除带有键 myNums 的项目，那里就什么都没有了。由于removeItem 不返回已移除的项目，因此您需要先获取该项目，然后用包含新值的新数组覆盖 localStorage 中的值

const nums = JSON.parse(localStorage.getItem('myNums'));

if (nums) { //nums exists, concat the new value
  localStorage.setItem('myNums', JSON.stringify(nums.concat(this.state.num)));
} else { //save empty array to localStorage
  localStorage.setItem('myNums', JSON.stringify([]);
}

【讨论】：