AngularJS

Question

我想用本地存储或 cookie 存储我的数据。数据源是一个json，这个json有数据限制（每页10个数据）。所以我实现了一个 "show more" 函数，当我点击一个按钮时它会加载其他 jsons。

我的问题是我无法正确存储整个加载的数据。我尝试了不同的技术，但一无所获。

这里是 html:

<div ng-controller="MyCtrl">
    <div ng-repeat="item in items">
        <p>{{item.title}}</p>
    </div>
    <button ng-click="getItems()" ng-hide="items.length == 0">show more</button>
</div>

这是控制器：

app.controller('MyCtrl', function($scope, $http) {
    $scope.items = [];
    var page = 1;

    $scope.getItems = function () {
        var url = 'https://differentdomain.com/json&page=' + page++;

        $http({method: 'GET', url: url}).
            success(function (data, status, headers, config) {
                if (status == 200) {
                    $scope.items = $scope.items.concat(data.results);
                    // or other way
                    // $scope.items.push.apply($scope.items, data.results)
                } else {
                    console.error('Error happened while getting list.')
                }
            }).
            error(function (data, status, headers, config) {
                console.error('Error happened while getting the list.')
            });
    };

    $scope.getItems();
});

任何人都有想法，我怎样才能存储加载的数据？

Answer 1

以上应该有效，我假设每次单击按钮时它都会加载 10 个。

您的问题似乎是如何在浏览器会话之间保留那些已加载的项目。如果是这样，我的建议是让您看看：

https://github.com/goodeggs/angular-cached-resource

这抽象出所有困难的部分，例如持久性和缓存检索，为您提供一致的 API。

Answer 2

如果您想知道的只是热存储数据，您可以只使用 localStorage.setItem 来保存数据并使用 localStorage.getItem 来检索这些数据。

最简单的实现是

app.controller('MyCtrl', function($scope, $http) {
    //retrieving saved object or init new array

    $scope.getItems = function () {
        //XXX if page is last one then return;
        //current page is basically num of objects divided by page size (10 in this case)
        var page = ($scope.items.length / 10) + 1;
        var url = 'https://differentdomain.com/json&page=' + page++;

        $http({method: 'GET', url: url}).
            success(function (data, status, headers, config) {
                if (status == 200) {
                    $scope.items = $scope.items.concat(data.results);
                    //saving current object
                    localStorage.setItem('items', JSON.stringify($scope.items));
                } else {
                    console.error('Error happened while getting list.')
                }
            }).
            error(function (data, status, headers, config) {
                console.error('Error happened while getting the list.')
            });
    };
    $scope.items = JSON.parse(localStorage.getItem('items')) || [];
    if (!$scope.items.length) $scope.getItems();

});

AngularJS - 存储页面数据

AngularJS - store page data

storage

json