react.js 中如何使用 localStorage？答案

【问题标题】：How is the localStorage is used within react.js?react.js 中如何使用 localStorage？
【发布时间】：2019-05-10 17:55:14
【问题描述】：

您好，我的问题很简单。如何将单个值保存到 localStorage；在存储之前应该是什么数据类型。在我阅读了关于 localstorage 的 2 篇文章和 StackOverflow 上的 4 个答案后，我仍然无法同化自己，因为这些示例是关于如何保持整个状态的。如果有人给我一个链接，也没有找到 react 和 localstorage 的文档，那就太好了。我为示例编写了此代码。提前谢谢你。

class List extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            name: '',
        }
    }

    componentDidMount() {
        this.setState({
           name: localStorage.getItem('name')
        })
    }


    changeName = e => {

        this.setState(prevState => ({
            name: 'someName'
        }));
        localStorage.setItem('name', this.state.name);
    }




    render() {
        return (
            <Container>
                <Row>
                    <Col sm={12}>
                        <div>{this.state.name}</div>
                        <button onClick={this.changeName}>change</button>
                    </Col>
                </Row>
            </Container>
        )
    }
}

export default List

【问题讨论】：

您尝试实现的目标。这里有什么问题。

标签： reactjs local-storage

【解决方案1】：

有一些 NPM 包，例如：

https://www.npmjs.com/package/reactjs-localstorage

和

https://www.npmjs.com/package/react-use-localstorage

这些应该会有所帮助。

【讨论】：

谢谢你，我正在使用其他 npm 包，它给了我错误“localStorage.set 不是函数”现在一切正常。

【解决方案2】：

在您的changeName 函数中，您正在设置状态，然后在localStorage 中设置相同的状态这在您的情况下不起作用。这是因为setState 是async 函数，所以执行需要一些时间，在这段时间内你的下一个代码将被执行。在这种情况下，您的 localStorage 将获得 empty value (first time) / previous value.

为了使其正确，您可以在setState 中使用callback，例如，

this.setState({name: 'someName'},
  () => {localStorage.setItem('name', this.state.name)} //callback
);

现在您可以每次都更新localStorage 中的值。

【讨论】：

我刚刚看到了这个问题......实际上这就是问题所在。谢谢。