如何将搜索结果存储在反应组件中以供将来使用答案

【问题标题】：How do I store search results in a react component for future use如何将搜索结果存储在反应组件中以供将来使用
【发布时间】：2021-05-14 03:10:48
【问题描述】：

我有一个 React 应用程序，它使用 Redux 来管理状态和 React Router 来浏览不同的页面。

我有一个页面/组件“按鸡尾酒名称搜索”，您可以在其中搜索鸡尾酒 API 中的鸡尾酒名称。 https://www.thecocktaildb.com/api.php。因此，您搜索，比如说“玛格丽塔”，您会在同一页面上看到结果。

现在，如果您转到我网站上的另一个页面，然后返回“按鸡尾酒名称搜索”页面，您将不再看到之前“玛格丽塔”搜索的结果。

当我返回“按鸡尾酒名称搜索”页面/组件时，我仍希望看到之前的“玛格丽塔”搜索结果。

不知道该怎么做。

我是否应该将“搜索输入”（目前只是“按鸡尾酒名称搜索”组件中的一个状态，放在 Redux 切片中，然后在您返回页面时重做搜索？我应该改为Redux slice 中的搜索结果？

问题是，我真的不需要“按鸡尾酒名称搜索”组件之外的那条信息（这通常是使用 Redux 的原因）。

还有其他方法吗？

另外，如果我想在刷新网站的情况下保留结果，我一定需要将这些值存储在 localStorage 中吗？

编辑：

【问题讨论】：

【解决方案1】：

为了记住用户输入的内容，你可以做两件事：

将用户正在搜索的任何内容作为查询参数传递给 URL，当用户加载页面时，如果查询参数中提供了任何内容，那么您将执行该搜索。如果用户现在点击后退按钮，他们将被重定向到上一个页面，该页面的 URL 格式为：example.com/search?query=Margharita，他们将能够看到结果
由于您使用的是 react 路由器，因此当您重定向到另一个页面时，react 路由器允许您传递额外的数据（以 json 格式）。因此，您可以使用该选项传递搜索结果，以便在您返回页面时重新加载这些结果

最后，是的，如果你想持久化你需要使用 localStorage 或 sessionStorage 的数据。你可以阅读localStorage和sessionStorage的区别here

【讨论】：