Сброс localstorage при обновлении страницы

Question

Пишу приложение на реакт, необходимо, что бы при обновлении страницы, сохранялись состояния элементов. Использую 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)
}

Answer 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)

БЛОГ НА HUSL

Сброс localstorage при обновлении страницы

Ответы (1 шт):