Сохранять boolean значение в state после перезагрузки страницы
Подскажите пожалуйста, как после перезагрузки страницы сохранять boolean значение в state?
constructor(props: ICommentsSectionProps, state: ICommentsSectionState) {
super(props);
this.state = {
reverse: false;
};
}
Значение reverse меняется по клику на кнопку.
<DefaultButton onClick={() => this.setState({ reverse: !reverse })} />
На изменение reverse вешаются значения flex-direction.
<div style={{flexDirection: reverse ? 'column-reverse' : 'column' }} >...</div>
По клику, значение меняется на true, элементы меняют направление. Однако, после перезагрузки страницы, значение опять возвращается на false.
Ответы (1 шт):
Автор решения: SwaD
→ Ссылка
Самое простое, положить информацию в localStorage
По клику, записываем значение, которое будет иметь условный вид false true но в виде строк :)
<DefaultButton onClick={() => {
localStorage.setItem('reverse', reverse ? '' : '1');
this.setState({ reverse: !reverse });
}}
/>
При создании компонента, считываем информацию из хранилища и если пустая строка, то будет false, если строка не пустая, будет true. Для конвертации используем двойное отрицание !!
constructor(props: ICommentsSectionProps, state: ICommentsSectionState) {
super(props);
this.state = {
reverse: !!localStorage.getItem('reverse');
};
}