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

Question

当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();
    }

}]);

Answer 1

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

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

Angularjs Best Practice for Data Store