1

Пишу приложение на реакт, необходимо, что бы при обновлении страницы, сохранялись состояния элементов. Использую localstorage, браузер добавляемые в хранилище элементы видит корректно, но при обновлении - сбрасывает состояния объектов localstorage на исходные.

Вероятно, проблема в том, что у меня изначально указаны дефолтные значения. Как сделать что б значения сначала считывались из хранилища, а если их там нет, то указывались дефолтные ?

const [resultId, setIdResult] = React.useState(true);

window.localStorage.setItem('resultId', JSON.stringify(resultId));
let data = JSON.parse(localStorage.getItem('resultId'));

const toggleIdRes = () => {
  setIdRes(!data)
}
1
  • не надо в рендере ничего сетить; добавил ответ 5 сен 2020 в 20:13

1 ответ 1

1
const useLocalStorageList = (key,defaultValue) => {
    const [ state, setState ] = useState(()=>JSON.parse(localStorage.getItem(key)||defaultValue))
    useEffect(()=>{
        localStorage.setItem(key, JSON.stringify(state))
    },[state])
    return [ state, setState ]
}
    const [resultId, setIdResult] = useLocalStorageList('resultId','true')
    const toggle = () => setIdResult(was=>!was) // надежней, чем просто (!resultId)

1
  • Благодарю, Ваш ответ сработал, спасибо что помогли :)
    – Miltosh
    5 сен 2020 в 20:38

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.