如何为每个唯一用户而不是 localStorage 实现持久化？

问题描述

我有一个配方生成器 CRUD 类型的应用程序。主窗口显示用户当前的食谱，用户可以点击添加成分按钮，并根据自己的喜好编辑他的食谱。

使用 localStorage，我实现了页面刷新的持久性，并且一切正常。

配料选择组件：

// This code below is for choosing a single ingredient. useEffect runs when I add,remove or update ingredient.

  useEffect(() => {
    // more code here
    localStorage.setItem("recipe",JSON.stringify(selectedRecipe));
    history.push("/recipewindow");
  },[history,selectedRecipe]);

主要配方显示组件：

//This code below is for my main window,where the full recipe is displayed. useEffect runs when
component is mounted

  useEffect(() => {
    const stateData = localStorage.getItem("recipe");
    stateData && setSelectedRecipe(JSON.parse(stateData));
    console.log(JSON.parse(stateData));
  },[setSelectedRecipe]);

然而，在我的应用程序中实现用户身份验证后，我才意识到 localStorage 存储相同的数据而不管用户如何，所以如果我有 3 个不同的帐户，它们都会有相同的配方窗口。

如何实现每个唯一用户的持久化？

我是否像这样将数据放入 Firestore 数据库：用户集合/user1234/current_recipe并继续存储和监听来自前端的更改，还是会太慢？

解决方法

您真的不应该为此使用本地存储。本地存储效率低下。

所有数据都应该存储在某个数据库中，并根据需要下载。

如果你想跨组件保留状态，一个不错的选择是使用 redux 之类的东西（你也可以使用上下文，但 redux 有更多的特性，可以防止很多潜在的错误，也可以在 react 之外使用），但是每次您的用户重新加载他们的页面时，该页面的内容都应该从外部 api 下载。