如何在 javascript.go(-1) 中保存前一阶段答案

【问题标题】：How to save previous stage in javascript.go(-1)如何在 javascript.go(-1) 中保存前一阶段
【发布时间】：2018-05-21 09:27:20
【问题描述】：

在我的项目中，我使用 angular $routeProvider 作为页面导航。为了回去，我正在使用 javascript.go(-1)。问题是当单击返回按钮时，它会再次加载和呈现所有数据。是否可以将前一阶段保存在 javascript.go(-1) 中？示例：

app.config(function ($routeProvider, localStorageServiceProvider) {

    $routeProvider
        .when('/api/lecturer/', {
            templateUrl: 'partials/dashboard.html',
            controller: 'dashboardController'
        })
        .when('/account/lecturer/project/', {
            templateUrl: 'part/lecturer_project.html',
            controller: 'projectController'
        }).otherwise({redirectTo: '/login'});})

HTML：

<li>
      <a onclick="javascript:history.go(-1);" style="cursor:pointer;" class="button">back
            <i class="entypo-left-dir right"></i>
      </a>
</li>

【问题讨论】：

您可以通过$rootScope.$on( "$routeChangeStart", function(event, next, prev)查看angular.run中的上一页。将先前的状态保存在服务中并将该数据提取到您的控制器中
能举个简单的实现例子吗？

标签： javascript angularjs pagination html5-history

【解决方案1】：

对于一个简单的实现，您需要记住前一页（只有一个），并将其存储在一些服务/工厂中，该服务/工厂将为您的控制器提供存储的值。这是ngRoute的简单演示：

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: "main.html"
    })
    .when('/api/lecturer/', {
      templateUrl: 'partials/dashboard.html',
      controller: 'dashboardController'
    })
    .when('/account/lecturer/project/', {
      templateUrl: 'part/lecturer_project.html',
      controller: 'projectController'
    })
    .otherwise({
      redirectTo: '/'
    })
});
app.controller('dashboardController', function($scope, historyService) {
  $scope.back = historyService.get();
});
app.controller('projectController', function($scope, historyService) {
  $scope.back = historyService.get();
});

app.service('historyService', function() {
  /*  `this.back` can be an array instead, 
    	which will work as a stack, 
        pushing new previous pages
        and popping then when redirected back
  */
  this.back = "";
  this.get = function() {
    return this.back;
  }
  this.set = function(val) {
    this.back = val;
  }
  this.delete = function() {
    this.back = "";
  }
})

app.run(function($rootScope, historyService) {
  // `$locationChangeStart` event works better for this example
  $rootScope.$on("$locationChangeStart", function(event, next, prev) {
    //console.log(event); 
    //console.log(next); // current page
    //console.log(prev); // previous page
    historyService.set(prev); // store the previous page in a service
  });
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>

<body ng-app="myApp">

  <a href="#!/api/lecturer/">lecturer</a>
  <a href="#!/account/lecturer/project/">project</a>
  <hr>
  <div ng-view></div>

  <script type="text/ng-template" id="main.html">
    <p>main.html</p>
  </script>
  <script type="text/ng-template" id="partials/dashboard.html">
    <p>partials/dashboard.html</p>
    <a ng-href="#!/">Main</a>
    <a ng-href="{{back}}">Go back</a>
  </script>
  <script type="text/ng-template" id="part/lecturer_project.html">
    <p>part/lecturer_project.html</p>
    <a ng-href="#!/">Main</a>
    <a ng-href="{{back}}">Go back</a>
  </script>

</body>
</html>

【讨论】：

感谢您的示例，但它不保存前一个阶段。每次我回去时它都会重新加载控制器
@Vitali angularjs 用于单页应用程序。您只有一页，并且通过呈现任何更改在其上显示不同的内容。页面应该从不刷新。你做错了什么
我会尽量解释清楚。为了对数据进行排序，我的页面上有很多过滤器。当用户选择某种类型时，他会得到特定的项目数据。当他点击它时，它会将他带到项目页面。当用户单击返回时，我想向他显示相同的排序（以保存他的选择）而不是重新加载默认数据。有可能吗？
@Vitali 哦，好吧，当然只是将数据保存在某处。如果您可以依靠不刷新页面并返回，那么只需将数据存储在服务/工厂中。再次加载控制器后，尝试从服务中获取数据，如果没有任何数据，则为控制器执行正常过程。
@Vitali 如果您认为应该允许刷新页面，那么您需要将数据存储在用户端或数据库中。由于数据听起来是临时的，因此将其保存在用户浏览器的缓存中。为此，您需要使用localStorage（或sessionStorage）。然后像服务示例一样简单地从中提取数据（如果数据存在）