Как заставить localStorage сохраняться даже после перезагрузки браузера?

Question

Я создал приложение реакции с mongodb и express с простой системой аутентификации. После регистрации модель User с моими учетными данными сохраняется в localStorage следующим образом:

{
    bio: ""
    email: "myemail@gmail.com"
    name: "myName"
    role: "user"
    _id: "5e9b42d31040cb0fc54c6936"
}

После входа в систему я хочу обновить свойство bio или добавить некоторые, так как они изначально пустые, поэтому для что я сделал вызов топором ios следующим образом:

async function updateBiography (evt) {
        evt.preventDefault();

        try {
            const res = await axios.put(`http://localhost:5000/biography/${id}`, { bioVal });

            setBioVal(res.bio);
        } catch (error) {
            console.log(error);
        }
    }

Итак, эта вещь возвращает обновленное значение bio, сохраняя его в базе данных, здесь нет проблем. Но я хочу обновить значение bio в браузере, и я хочу, чтобы это происходило мгновенно по мере отправки. Чтобы добиться этого, я сделал это:

React.useEffect(() => {
    const currentUser = JSON.parse(localStorage.getItem('user'));
    currentUser['bio'] = bioCurrentValue;
    localStorage.setItem('user', JSON.stringify(currentUser));
}, [reload]);

После этого элемент в localStorage выглядит так:

{
    bio: "the new value",
    ...
}

Awesome. У меня проблема в том, что после перезагрузки браузера localStorage не сохраняет обновления. После перезагрузки элемента в localStorage он становится как прежде:

{
    bio: "",
    ...
}

Как я могу сохранить обновления в localStorage?

Answer 1

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

Если в каком-то режиме приватного просмотра или с некоторыми другими расширениями приватности, хранилище обычно стирается вне. С этим ничего нельзя поделать, если этого хочет пользователь.