时间戳

首页 > 解决方案 > 如何存储到本地存储？（反应）

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

问题描述

我有一个问题要问你......在我的反应应用程序上，我有一个<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');

我需要做什么 ？

标签： reactjsinputlocal-storage

解决方案

无需手动操作 DOM，您可以保持消息处于状态并在每次更改时更新 localStorage 值，并在创建组件时从 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} />;
  }
}

推荐阅读