如何存储到本地存储中？ （反应）

Question

我有一个问题要问...在我的应用程序上，我有一个<input></input>，但我希望用户能够保留其消息，这要归功于本地存储。

class Profil extends Component {
    message() {
        if (localStorage != 'undefined'){
            document.getElementById('message').value = localStorage.getItem('message');
        }
        else {
            alert("localStorage is not supported");
        }
    }
    render() {
        return (
            <div>
                <input name="message" onChange={() => this.message()}></input>
            </div>
        );
    }}

这样，当我写信时，我直接收到一条错误消息：

TypeError: localStorage.getItem(...) is null

这行是false：

document.getElementById('message').value = localStorage.getItem('message');

我该怎么办？

Answer 1

您可以使消息保持状态并在每次更改时更新localStorage值，也可以在创建组件时从localStorage读取值，而不是手动操作DOM。

示例

class Profile extends React.Component {
  constructor() {
    super();
    this.state = {
      message: localStorage.getItem("message") || ""
    };
  }

  onChange = event => {
    const message = event.target.value;

    localStorage.setItem("message", message);
    this.setState({ message });
  };

  render() {
    return <input value={this.state.message} onChange={this.onChange} />;
  }
}