返回时保留所有状态答案

【问题标题】：Keep all states when going back返回时保留所有状态
【发布时间】：2015-09-17 21:41:41
【问题描述】：

我的 Angular 应用程序中有多个页面，用户可以更改很多页面，即打开选项卡和药丸、模式等。例如，他们打开一个模式，然后单击该模式中的链接，该链接会导致他们到另一个页面。在另一个页面上，当他们返回浏览器历史记录时，我希望他们以离开时的方式查看第一页，即模式打开时，而不是重新加载时的样子。

我正在使用带有 Angular 1.4.3 的 ui-router。

到目前为止，我已经查看了以下链接：

...但它们似乎不是我所需要的。我什至不知道如何用谷歌搜索。

另一个例子是当用户在搜索栏中输入内容，然后点击一个结果，这会导致一个新页面。回去的时候又要重新进入搜索，这不是最大的体验。

【问题讨论】：

您可以随时尝试使用存储在 localStorage 中的对象中的一些变量来管理所有这些小东西。

标签： javascript angularjs angular-ui-router

【解决方案1】：

使用服务存储页面状态

与其将页面状态和用户输入存储在$scope 上，不如将其存储在与$scope 一起注入页面控制器的持久服务中。

在$scope上存储对服务的引用：

myApp.service('MyPageStateService', function() {
    this.someProperty = 'some initial state';
});

myApp.controller('MyPageController', function($scope, MyPageStateService) {
    $scope.state = MyPageStateService;
});

并从页面模板访问存储在持久状态服务上的数据：

<div ng-controller="MyPageController">
    <p>My page state is {{state.someProperty}}</p>
</div>

当在应用程序中导航回该页面时，控制器将获得一个新的$scope，但与MyPageStateService 的实例相同。

【讨论】：

这还不够。我无法存储用户交互的所有微小细节。而且它的可扩展性也不是很好。如果我向页面添加新内容，我不想扩展该服务。我想知道是否已经有一些浏览器 API 可供我利用。
您目前如何存储所有这些“用户交互的微小细节”？
我不是。理想情况下，我不必这样做。
UI 状态必须存储在某个地方。通常在 Angular 应用程序中，这些细节都通过绑定存储在范围内（例如，使用 ng-model="something"）。这里唯一的变化是所有绑定都以state. (ng-model="state.something") 为前缀。
我不确定我是否了解您的可扩展性问题。这种方法不需要任何额外的逻辑，除了每页一行服务注册。否则，您需要添加到服务的任何其他内容都将在控制器上 - 因此您不会添加任何额外的开销，只需将逻辑从控制器移动到服务。

【解决方案2】：

你可以看看sticky states。它们不限于前进/后退导航，这使它们具有一定的一致性。

如果除了前进/后退之外的任何地方都不需要这种行为，我想可以通过在$stateChangeStart 上执行$stickyState.reset('...') 来完成除相邻状态之外的所有操作。

【讨论】：