如何使用localStorage.removeItem从数组中删除项目？

Question

我正在使用localStorage.setItem并localStorage.getItem存储来自API的数据（以我的情况为设备），以通过页面重置保持状态。单击设备后，它将存储在购物袋中。当用户单击包装袋中的设备时，我希望它能够“删除”并从本地存储中删除。现在它可以正常工作，以便在UI上显示它已被删除，但是当页面刷新时它又回来了，因为它仍在localStorage中。我尝试localStorage.removeItem(deviceTitle)在removeDevice函数中使用它，但是它似乎没有任何作用。这是因为我有localStorage.getItem在componentDidMount？如果是这样，我该如何进行更改以使该removeItem功能正常工作？addDevice() 是在onClick函数期间调用的（请让我知道是否需要查看代码的这一部分）  addDevice = (e, deviceTitle) => {    const array = Array.from(this.state.bag);    if (array.indexOf(deviceTitle) === -1) {      array.push(deviceTitle);    } else {      return;    }    localStorage.setItem("list", JSON.stringify(array));    this.setState({      bag: array    });  };这是应该从本地存储中删除设备的位置removeDevice = (e, deviceTitle) => {    this.setState(prevState => ({      bag: prevState.bag.filter(d => d !== deviceTitle)    }));    localStorage.removeItem(deviceTitle);  };这是存储设备的我的componentDidMount（）componentDidMount() {    this.search("");    const storedList = JSON.parse(localStorage.getItem("list"));    console.log(storedList);    const bag = storedList;    this.setState({ bag });  }编辑下面添加的更多代码：  render() {    return (      <div>        <form>          <input            type="text"            placeholder="Search for devices..."            onChange={this.onChange}          />          {this.state.devices.map(device => (            <ul key={device.title}>              <p>                {device.title}{" "}                <i                  className="fas fa-plus"                  style={{ cursor: "pointer", color: "green" }}                  onClick={e => this.addDevice(e, device.title)}                />              </p>            </ul>          ))}以下是其外观的屏幕截图： 本地存储中的 项目，在UI中删除后的项目， 但是当我重置页面时，由于未从localStorage删除设备，它会恢复为第一张图像

Answer 1

删除项目本身后，只需更换阵列

removeDevice = (e, deviceTitle) => {

    this.setState(prevState => ({

      bag: prevState.bag.filter(d => d !== deviceTitle)

    }));

    // actual localStorage item removing 

        let devicesArray  = JSON.parse(localStorage.getItem("list"))

        devicesArray.splice(devicesArray.indexOf(deviceTitle), 1)

        localStorage.setItem("list", JSON.stringify(devicesArray));

  };

因为设置项目，如果它在那里替换它的值检查在这里

Answer 2

由于已经在过滤数据并更新状态，因此可以添加第二个参数作为setState回调。在回调中，您可以从状态中获取更新的包，并将其设置为替换localStorage中的值。

你可以这样

removeDevice = (e, deviceTitle) => {

  this.setState(prevState => ({

    bag: prevState.bag.filter(d => d !== deviceTitle)

  }), () => {

    const { bag } = this.state;

    localStorage.setItem("list", JSON.stringify(bag))

  });

};