Как localStorage используется вact.js?

Question

Здравствуйте, мой вопрос прост.Как я могу сохранить одно значение в localStorage;какой тип данных он должен быть перед сохранением.После того, как я прочитал 2 статьи о локальном хранилище с реагированием и 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

В вашей функции changeName вы устанавливаете состояние, а после этого устанавливаете то же состояние в localStorage , которое не будет работать в вашем случае . Это потому, что setState - это async функция, поэтому для ее выполнения потребуется некоторое время, и в это время ваш следующий код будет выполнен. В этом случае ваш localStorage получит empty value (first time) / previous value.

Чтобы исправить это, вы можете использовать callback в setState как,

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

Теперь вы можете каждый раз обновлять значение localStorage.

Answer 2

Есть несколько пакетов NPM, таких как:

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

и

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

Это должно помочь.