Javascript 返回时保持所有状态

我的Angular应用程序中有多个页面，用户可以更改很多，例如，打开标签和药片、情态等。比如说，他们打开一个模式，然后单击该模式中的链接，这会将他们引导到另一个页面。在另一个页面上，当他们返回浏览器历史记录时，我希望他们看到第一个页面的方式，即打开模式，而不是重新加载时的外观

我正在使用Angular 1.4.3的ui路由器

到目前为止，我已经研究了以下链接：

……但它们似乎不是我所需要的。我甚至不知道如何用谷歌搜索这个

另一个例子是，当用户在搜索栏中输入某个内容，然后单击一个结果，这将导致一个新页面。当他们返回时，他们必须再次进入搜索，这不是最好的体验。

使用服务存储页面状态 与其将页面状态和用户输入存储在

$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>

我的页面状态为{state.someProperty}

当导航回应用程序中的此页面时，控制器将获得一个新的

$scope

，但与您可以查看的

MyPageStateService

的实例相同。它们不限于向前/向后导航，这使它们具有一定的一致性

---

如果这种行为除了向前/向后之外在任何地方都不可取，我想可以通过对除相邻状态之外的所有状态执行

$stateChangeStart

来实现。

您可以始终尝试使用存储在localStorage中的对象中的一些变量来管理所有这些小事情。这是不够的。我无法存储用户交互的所有细微细节。而且它的可扩展性也不是很强。如果我向页面添加新内容，我不想扩展该服务。我想知道是否已经有一些浏览器API可以用来实现这一点。你目前是如何存储所有这些“用户交互的微小细节”的？我没有。理想情况下，我不必这样做。UI状态必须存储在某个地方。通常在angular应用程序中，这些详细信息都通过绑定存储在scope上（例如使用

ng model=“something”

）。这里唯一的变化是所有绑定的前缀都是

state.

（

ng model=“state.something”

）。除了每页一行服务注册之外，这种方法不需要任何额外的逻辑。否则，您需要添加到服务中的任何其他内容都将位于控制器上，因此您不会增加任何额外的开销，只是将逻辑从控制器移动到服务中。