即使重新加载浏览器后，如何使localStorage持久化？

Question

我用mongodb制作了一个react应用，并通过简单的身份验证系统进行表达。注册后，带有我的凭据的用户模型将被保存到localStorage中，如下所示：

{
    bio: ""
    email: "[email protected]"
    name: "myName"
    role: "user"
    _id: "5e9b42d31040cb0fc54c6936"
}

登录后，我想更新生物属性，或添加一些，因为它是空的初始状态，因此，为此我进行了axios调用，如下所示：

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",
    ...
}

很棒。我的问题是，重新加载浏览器后，localStorage无法保留更新。在将项目重新加载到localStorage之后，它变得与以前一样：

{
    bio: "",
    ...
}

如何使更新保留在localStorage中？

Answer 1

本地存储通常是持久性的，但是您必须遵守用户的浏览器设置。

[如果处于某些私人浏览模式或带有其他一些隐私扩展，通常会清空存储。如果这正是用户想要的，您将无能为力。