javascript - 反应待办事项列表中的本地存储

Question

我使用反应创建了待办事项列表，但我希望它是本地存储 - 所以当用户刷新页面时，它仍然保存项目并将呈现它们。我读到我需要使用 localStorage 但我不确定在哪里以及如何附加 app.js 和 TodoItem 组件

class App extends Component {
  state = {
    items: [],
    id: uuidv4(),
    item: "",
    editItem: false
  };
  handleChange = e => {
    ...
  };
  handleSubmit = e => {
    e.preventDefault();
    const newItem = {
      id: this.state.id,
      title: this.state.item
    };
    const updatedItems = [...this.state.items, newItem];

    this.setState({
      items: updatedItems,
      item: "",
      id: uuidv4(),
      editItem: false
    });
  };
  ...
  render() {
    return (
            <TodoInput
              item={this.state.item}
              handleChange={this.handleChange}
              handleSubmit={this.handleSubmit}
              editItem={this.state.editItem}
            />
            <TodoList
              items={this.state.items}
              clearList={this.clearList}
              handleDelete={this.handleDelete}
              handleEdit={this.handleEdit}
            />
    );
  }
}

export default class TodoItem extends Component {
  state = {
    avatarURL: '',
  }

  componentDidMount() {
    imgGen().then(avatarURL => this.setState({ avatarURL }));
  }

  render() {
    const { title, handleDelete, handleEdit } = this.props;
    const { avatarURL } = this.state; 
    return (
        <h6>{title}</h6>
          <span className="mx-2 text-success" onClick={handleEdit}>
          </span>
          <span className="mx-2 text-danger" onClick={handleDelete}>
          </span>
    );
  }
}

标签： javascriptreactjslocal-storage

Answer 1

你可以这样做，注意评论

class App extends Component {
  state = {
    // load items while initializing
    items: window.localStorage.getItem('items') ? JSON.parse(window.localStorage.getItem('items')) : [],
    id: uuidv4(),
    item: "",
    editItem: false
  };
  handleChange = e => {
    // ...
  };

  handleSubmit = e => {
    e.preventDefault();
    const newItem = {
      id: this.state.id,
      title: this.state.item
    };
    const updatedItems = [...this.state.items, newItem];

    // Save items while changing
    window.localStorage.setItem('items', JSON.stringify(updatedItems));

    this.setState({
      items: updatedItems,
      item: "",
      id: uuidv4(),
      editItem: false
    });
  };
  // ...

  render() {
    return (
      <>
        <TodoInput
          item={this.state.item}
          handleChange={this.handleChange}
          handleSubmit={this.handleSubmit}
          editItem={this.state.editItem}
        />
        <TodoList
          items={this.state.items}
          clearList={this.clearList}
          handleDelete={this.handleDelete}
          handleEdit={this.handleEdit}
        />
      </>
    );
  }
}