javascript - AngularJS 使用浏览器 URL 历史记录维护状态

Question

现状:

用户请求http://localhost/#!/list/789 (类别 id = 789 中的所有产品)

服务器发回index.jsp，index.jsp中的AngularJS内容运行，ngRoute看到“/#!/list/789”，AngularJS获取模板，ProductListController运行，执行GET请求，接收JSON格式的产品列表

浏览器地址栏中的 URL 更改为 http://localhost/list/789

在此产品列表页面中，用户可以过滤页面中的产品，例如:显示此价格范围内的所有产品，显示具有此颜色、属于此品牌的产品等，全部使用 JavaScript 完成
问题是如果用户点击产品页面，例如localhost/show/89 并通过点击后退按钮返回，他们将再次看到产品列表页面，但所有过滤器都将消失

是否可以以某种方式保留“状态”，以便当用户返回时，他们的所有过滤器都将被重新应用？
我认为这与历史pushState有关，但是我如何在AngularJS中做到这一点，可能吗？

我认为这应该是可能的，因为在当前情况下，当浏览器地址栏中的URL发生变化时(从localhost/#!/list/789到localhost/list/789)，浏览器不会发出任何请求服务器
因此，当用户应用过滤器时，URL 可以更改为 localhost/#!/list/789?price=50-100&name=a 或 localhost/#!/list789#price:50-100,name=a，但没有向服务器发送请求
用户进入产品页面，点击返回，他们将到达 localhost/#!/list/789?price=50-100&name=a 而不是 localhost/#!/list/789

如何在 AngularJS 中执行此操作？

我知道这些解决方案:
- 本地存储
- Cookie，即每次用户应用过滤器时，浏览器都会通知服务器(嘿，用户刚刚应用了价格过滤器)，服务器将其保存在 session 中
但是，最好在浏览器历史记录中维护状态，因为应用每个过滤器时，都会创建一个新的 URL，从而使用户能够撤消每个过滤器应用程序

Answer 1

您可以使用 Angular Ui Router 保留状态