时间戳

首页 > 解决方案 > 单击后退按钮时如何保留我的数据？

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

问题描述

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

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

我在我的网站上显示带有分页的数据列表。每次用户更改页面时，都会触发一个函数来检查数据是否已被获取。如果没有，则调用 API 来获取它。由于我设置reloadOnSearch了 equal to false，因此单击浏览器后退按钮只会更改 URL 而不会更改视图。我$routeUpdate在这种情况下使用。当$routeUpdate触发时，我首先检查这是否是由于分页单击或后退按钮单击。在分页点击的情况下，将执行正常的 API 调用。但如果是由于后退按钮，我会重新加载页面。但这会导致丢失所有以前获取的响应数据，我想避免这种情况。一个明显的解决方案是在$routeUpdate打回来。但问题是我的网站有多个数据列表，我希望避免在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();
    }

}]);

标签： angularjsngroute

解决方案

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

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

Angularjs 数据存储最佳实践

推荐阅读