如何將從$資源檢索到的值存儲在localStorage中？

Question

我的服務使用googleapis解析RSS並返回包含其他對象的數組的Object。 下面，鍍鉻控制檯輸出中：

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

但在我的控制器不能使用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 : 

請問有什麼不對？

service.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'])); 
}); 

編輯：現在，您所提供的代碼爲您服務，很明顯，它不返回的承諾。你需要做的，爲了讓廣大消費者服務，才能夠等待的結果：

.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; 
    }; 
}) 

Answer 2

的問題是，你不能正確處理異步請求，所以：

$scope.feeds = []; 

console.log('TEST : Load feeds async'); 

FeedList.get().then(function() { // each feed comes as argument 
    angular.forEach(arguments, function (feed) { 
     $scope.feeds.concat(feed); // merge arrays 
    }); 

    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'])); 
}); 

服務：

.service('FeedList', function ($q, $rootScope, FeedLoader) { 
    this.get = function() { 
     var promises = []; // to handle async loading 

     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' 
     }]; 

     angular.forEach(feedSources, function (source) { 
      var defer = $q.defer(); 

      FeedLoader.fetch({ 
       q: source.url, 
       num: 10 
      }, {}, function (data) { 
       var feed = data.responseData.feed; 
       defer.resolve(feed.entries); // todo - need to handle errors with 'defer.reject' 
      }); 

      promises.push(defer.promise); 
     }); 

     return $q.all(promises); 
    }; 
})