重新加载页面或使用AngularJS单击“返回”按钮时如何保存搜索结果答案

【问题标题】：How to save search results when reloading page or clicking "back" button with AngularJS重新加载页面或使用AngularJS单击“返回”按钮时如何保存搜索结果
【发布时间】：2025-12-26 00:20:12
【问题描述】：

我有一个带有从后端加载信息的搜索页面的 Web 应用程序。当用户搜索特定内容时，会出现相关数据。但是，当用户重新加载页面时，搜索结果将被删除。此外，如果用户单击特定搜索结果，新页面会加载有关此搜索的更详细视图。当您单击浏览器的返回按钮时，搜索结果会再次丢失。当页面刷新或用户想要返回搜索结果时，如何保存搜索结果？

我很欣赏基于 AngularJS 的解决方案，因为这是我正在使用的框架。谢谢！

【问题讨论】：

标签： javascript html angularjs

【解决方案1】：

您应该使用 ui-router 或 ngRoute 进行路由。似乎您没有使用它，因为您说当用户单击后退按钮时，结果会丢失。如果您使用路由，则页面不会刷新，如果您将结果保存在范围内，也不会丢失结果。

对于刷新后的持久存储，我建议使用window session storage

在您的应用中，您可以将 $window 服务注入您的控制器/服务或任何您想要的，然后像这样使用它：

$window.sessionStorage["myVar"] = 'this will be here even after refresh';

如果用户刷新页面，您可以像这样检索变量的内容：

var myVar = $window.sessionStorage["myVar"];

【讨论】：

我认为这不是很棱角分明，Paresh 的解决方案似乎更好。
@GrantLay 我认为这只是个人喜好，与角度或不角度无关。 Peresh 的回答实际上并没有显示任何角度。他只提供了一个图书馆的外部链接，但没有展示如何使用它，特别关注这个问题。此外，问题不仅与持久存储有关，还与路由有关，即使不是直接的。但就像我说的，答案非常相似，如果 Paresh 在这里提供了如何使用 ngStorage 库的解决方案，那么是的，他的答案可能会更有角度。
@emil.c 道歉，阅读 mozilla 链接我以为您直接使用了 javascript 窗口对象。当然，您在示例中使用的 $window（不是 window）是与 sessionStorage 交互的有效角度方式。

【解决方案2】：

您可以为此使用 localStorage。

localStorage.setItem(key,value);

和

localStorage.getItem(key);

请寻找更多高级功能

ngStorage

【讨论】：