reactjs - 如何存储到本地存储？ ( react )

Question

我有一个问题要问你...在我的 React 应用程序中，我有一个 <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

这条线是假的:

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

我需要做什么 ？

Answer 1

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

示例

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} />;
  }
}