angularjs - 使用angularjs ui bootstrap分页重新加载后如何留在当前页面上？

Question

下面是我使用 angularjs-ui-bootstrap 进行简单分页的代码。由于我要处理的数据集太大而无法在客户端显示页面，因此我只是在页面更改时抓取每页的数据。

我遇到的问题是，当页面重新加载时，分页总是重置为第一页。如何在页面重新加载时让它停留在当前页面？

html

<uib-pagination total-items="totalCount" ng-model="currentPage" ng-change="pageChanged()" items-per-page="2"></uib-pagination>

JavaScript

    $scope.currentPage = $location.search().page;

    getData($scope.currentPage);

    $scope.pageChanged = function () {
        getData($scope.currentPage);
        $location.url('?page=' + $scope.currentPage);
    };

    function getData(pageNumber) {        
        if (pageNumber == null)
            pageNumber = 1;
        $http.get('http://localhost.angulartestapi.com/v1/AngularTestApi/getteams?pageNumber=' + pageNumber)
        .success(function (data) {
                $scope.teams = data.Teams;
                $scope.totalCount = data.TotalCount;
            }).error(function () {
            alert("error");
        });

此代码当前向 url 添加一个 ?page={currentPage} 参数。当页面重新加载时，它从 $location.search().page 获取保存的页面，并进入 getData() 并设置 $scope.currentPage到正确的页码。但随后它进入 pageChanged() 并且 $scope.currentPage 重置回 1。

编辑 Cookie 方法

所以我尝试将 currentPage 保存在这样的 cookie 中:

    $scope.currentPage = $cookies.get('page');

    getData($scope.currentPage);

    $scope.pageChanged = function () {
        getData($scope.currentPage);
        $cookies.put('page', $scope.currentPage);
    };       

当页面重新加载时，它从 cookie 中获取保存的页面并进入 getData() 并将 $scope.currentPage 设置为正确的页码。但随后它进入 pageChanged() 并且 $scope.currentPage 重置回 1。所以问题仍然存在。

编辑 2:

即使 $scope.currentPage 被硬编码为 2，当页面重新加载时 $scope.currentPage 被重置为 1 在 $scope.pageChanged 中。

    $scope.currentPage = 2;

    getData($scope.currentPage);

    $scope.pageChanged = function () {
        getData($scope.currentPage);            
    };       

最终编辑:

找到了留在当前页面的方法。答案如下。

Answer 1

您可以使用浏览器中的localStorage 来保存当前页面，并在以后需要时获取当前页面。

$scope.currentPage = 1;
localStorage.StoreCurrentPage = $scope.currentPage; 
if(localStorage.StoreCurrentPage){
    $scope.currentPage = localStorage.StoreCurrentPage;
}else{
    $scope.currentPage = 1;
}