javascript - 如何存储从 localStorage 中的 $resource 检索到的值？

Question

我的服务使用 googleapis 解析 RSS 并返回包含其他对象的数组对象。下面，chrome 控制台输出:

[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
   0: Object
   1: Object
   2: Object
   3: Object

但在我的 Controller 中不能使用 localStorage 来检索数据，控制台输出只返回括号或什么都不返回:

$scope.feeds = FeedList.get();
window.localStorage.setItem('savedData', JSON.stringify($scope.feeds));

console.log('TEST : ' + window.localStorage['savedData']);
console.log('TEST : ' + JSON.parse(window.localStorage.getItem('savedData')));
console.log('TEST : ' + JSON.parse(window.localStorage['savedData']));

输出:

TEST : []
TEST : 
TEST : 

请问有什么问题吗？

服务.js

.factory('FeedLoader', function ($resource) {
        return $resource('http://ajax.googleapis.com/ajax/services/feed/load', {}, {
            fetch: { method: 'JSONP', params: {v: '1.0', callback: 'JSON_CALLBACK'} }
        });
    })

.service('FeedList', function ($rootScope, FeedLoader) {
    var feeds = [];
    this.get = function() {
        var feedSources = [
            {title: 'rss1', url: 'http://www.website.com/rss/feed/rss_feed_25300'},
            {title: 'rss2', url: 'http://www.website.com/rss/feed/rss_feed_10720'},
        ];
        if (feeds.length === 0) {
            for (var i=0; i<feedSources.length; i++) {
                FeedLoader.fetch({q: feedSources[i].url, num: 10}, {}, function (data) {
                    var feed = data.responseData.feed;
                    console.log(feed.entries);
                    feeds.push(feed.entries);
                });
            }
        }
        return feeds;
    };
})

Answer 1

错误在于 FeedList.get() 使用了异步并且 $scope.feeds 不会立即被填充。

试试这个:

$scope.feeds = FeedList.get();
$scope.feeds.then(function () {
    // $scope.feeds is done loading now
    window.localStorage.setItem('savedData', JSON.stringify($scope.feeds));

    console.log('TEST : ' + window.localStorage['savedData']);
    console.log('TEST : ' + JSON.parse(window.localStorage.getItem('savedData')));
    console.log('TEST : ' + JSON.parse(window.localStorage['savedData']));
});

编辑:既然您已经为您的服务提供了代码，很明显它不会返回 promise 。您需要这样做，以便您的服务的消费者能够等待结果:

.service('FeedList', function ($rootScope, $q, FeedLoader) {
    var feeds;
    this.get = function() {
        var feedSources = [
            {title: 'rss1', url: 'http://www.website.com/rss/feed/rss_feed_25300'},
            {title: 'rss2', url: 'http://www.website.com/rss/feed/rss_feed_10720'},
        ];

        if (!feeds) {
            var feedPromises = feedSources.map(function (source) {
                return FeedLoader.fetch({q: source.url, num: 10}, {}).$promise
                .then(function (data) {
                    return data.responseData.feed.entries;
                });
            });

            feeds = $q.all(feedPromises)
            .then(function (retrievedFeeds) {
               return Array.prototype.concat([], retrievedFeeds);                
            });
        }
        return feeds;
    };
})