单击后退按钮时如何保留我的数据？答案

【问题标题】：How to preserve my data while clicking the back button?单击后退按钮时如何保留我的数据？
【发布时间】：2019-11-16 14:56:24
【问题描述】：

当 reloadOnSearch 设置为 false 时，在浏览器后退按钮单击时触发 API 调用

由于我已将reloadOnSearch 设置为等于false，因此我使用$routeUpdate 来识别浏览器后退按钮的点击。目前，当这被触发时，我重新加载页面。但是这种重新加载会导致我存储的所有 API 调用响应数据丢失。 有没有办法防止这种数据丢失？

我正在我的网站上显示带有分页的数据列表。每次用户更改页面时，都会触发一个函数来检查数据是否已被获取。如果没有，则调用 API 来获取它。由于我已将reloadOnSearch 设置为等于false，因此单击浏览器后退按钮只会更改 URL 而不会更改视图。在这种情况下，我使用$routeUpdate。当$routeUpdate 被触发时，我首先检查这是由于分页单击还是后退按钮单击造成的。在分页点击的情况下，将执行正常的 API 调用。但如果是由于后退按钮，我会重新加载页面。但这会导致丢失所有以前获取的响应数据，我想避免这种情况。一个明显的解决方案是在$routeUpdate 回调中调用API 调用函数。但问题是我的网站有多个数据列表，我希望避免在app.run() 中编写多个条件和函数调用。 有什么方法可以在单击返回按钮时保留我的数据？

这部分代码在app.run()

$rootScope.$on('$routeUpdate', function(event, next){
    console.log("route update fired");
    // This gives me the parameters in the URL (eg.page number)
    let params = JSON.stringify(next.params);
    console.log(params); // Eg. {listTransactionsPage: 2}
    // Now I will compare this with the $rootScope value which is saved in the controller (See the code below for more details).
    if(params !== JSON.stringify($rootScope.listCurrentParams))){
            console.log("back/forward button clicked.");
            $route.reload();
        }
        else{
            console.log("route changed via pagination");
        }
    }
});

这部分代码在app.controller()中

app.controller('listTransCtrl', ['$scope', '$location', '$window', '$rootScope', function($scope, $location, $window, $rootScope){
    console.log("Inside listTransCtrl.");
    $rootScope.listCurrentParams = {};
    // the function that gets called upon pagination button click..
    $scope.listTransPageChanged = function(pageNum){
        console.log(pageNum);
        $location.search('listTransactionsPage', pageNum);
        $rootScope.listCurrentParams = $location.search();
        console.log($rootScope.listCurrentParams);
        // the API call gets fired
        $scope.getAllTransFunc();
    }

}]);

【问题讨论】：

调用$route.reload() 会导致ng-view 元素破坏控制器及其作用域。然后它创建一个新的范围并重新实例化控制器。任何需要生存的数据都应该存储在服务中。（可以使用$rootScope，但不推荐使用。）
@georgeawg 感谢您的建议。会试一试，让你知道结果如何

标签： angularjs ngroute

【解决方案1】：

感谢@georgeawg 提出此解决方案。以前，我将所有 API 调用响应数据存储在 控制器 中的$scope 中。但是通过将这些数据存储在服务中，我能够防止其在$route.reload() 期间丢失。

如果您想了解如何在服务中存储数据，请点击此链接：

Angularjs Best Practice for Data Store

【讨论】：