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

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().

期间丢失

如果您想了解如何在服务中存储数据，请遵循此 link：

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

How to preserve my data while clicking the back button?

angularjs

ngroute

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