Question

你好，我的问题很简单。如何将单个值保存到localStorage？在存储之前应该是什么数据类型。在我阅读了2篇有关react的localstorage文章和4篇关于StackOverflow的答案之后，我仍然无法吸收自己，因为这些示例说明了如何保持整个状态。如果有人给我链接，也找不到反应和本地存储的文档，那将很棒。我为示例编写了此代码。预先谢谢你。

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

Answer 1

有一些NPM软件包，例如：

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

和

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

这些应该有所帮助。

Answer 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中获得更新值。

在react.js中如何使用localStorage？

2 个答案: