Question

这是我到目前为止所做的：https://gist.github.com/justgoof9/f6250cdbd615bda139ef8d56375fa12c

因此，当我向列表添加项目时，当我刷新浏览器时，我希望它仍然保存。我想用JSON做，但不知道如何。任何人都可以帮助我吗？

Answer 1

是的，您可以通过使用本地存储来实现它，因此每当您将某些内容推送到Todo列表时，将更新的列表保存在本地存储中，然后在UI中呈现时使用存储在本地存储中的数据。这是实现这一目标的一个小例子 - ＆gt; https://www.w3schools.com/html/html5_webstorage.asp 希望这能解决你的问题。

Answer 2

在LocalStorage中存储对象有点棘手，因为LocalStorage接受字符串，但是JSON.stringify()来救援！你在函数addToList：

addToList = input => {
    let listArray = this.state.lists;

    listArray.push(input);

    this.setState({
      list: listArray,
      userInput: ""
    });
  };

您想要添加一个LocalStorage调用，将list从this.state保存到LocalStorage，如下所示：

addToList = input => {
    let listArray = this.state.lists;

    listArray.push(input);

    this.setState({
      lists: listArray,
      userInput: ""
    }, () => {
        window.localStorage.setItem('savedList', JSON.stringify(this.state.lists));
    });
  };

要检索它，您需要将其解析回数组/对象，如下所示：

componentDidMount() {
    const list = window.localStorage.getItem('savedList');
    const parsedList = JSON.parse(list);

    this.setState({
        lists: parsedList,
    })
}

现在，您添加的每个新项目都会保存到localStorage并在刷新时检索，剩下的就是应用相同的逻辑来删除项目，如下所示：

listOnClick = index => {
    var arr = this.state.lists;
    arr.splice(index, 1);

    this.setState({ lists: arr }, () => {
        window.localStorage.setItem('savedList', JSON.stringify(this.state.lists));
    });
};

你在addToList中也有一个拼写错误，你分配给this.state.list而不是this.state.lists

如何在本地存储中保存我的待办事项应用程序列表？

2 个答案: