AngularJSの更新時にサービス内のデータを保持する方法は？

Question

私は数週間で私の会社が立ち上げている新しいブランドのための新しいマルチユースウェブサイトを作成しています。 WordPressバックエンドとWP REST APIを使用して、フロントエンドとミドルウェアのアプリケーションにNodeJS/Express/AngularJSを使用できるようになりました。

現在のところ、リンク先ページを読み込むと、フロントページのすべての関連する投稿について、WordPressにHTTP GETリクエストが送信されます。このデータは、その後、コントローラ間で使用されるサービスに渡されます。

ので、初期セットアップはこれです：

landingController HTTPリクエストのための

angular 
    .module('glossy') 
    .controller('LandingController', LandingController) 

    LandingController.$inject = ['featuredService', 'sharedPostsService']; 

    function LandingController(featuredService, sharedPostsService){ 

    // Set up view model (vm) variables 
    var vm = this; 
    vm.featured = []; 

    // Call this function on state 'home' load 
    activate(); 

    // Calls getFeatured function and prints to console 
    function activate(){ 
     return getFeatured() 
     .then(function(){ 
      console.log('GET Featured Posts'); 
     }); 
    } 

    // Calls the featuredService then stores response clientside for rendering 
    function getFeatured(){ 
     return featuredService.getFeatured() 
     .then(function(data){ 
      vm.featured = data; 
      sharedPostsService.setPosts(data); 
      return vm.featured; 
     }); 
    } 
    } 

工場

angular 
    .module('glossy') 
    .factory('featuredService', featuredService) 

    featuredService.$inject = ['$http']; 

    function featuredService($http){ 
     return { 
     getFeatured: getFeatured 
     }; 

     // Performs HTTP request then calls success or error functions 
     function getFeatured(){ 
     return $http.get('/api/posts') 
     .then(getFeaturedComplete) 
     .catch(getFeaturedFailed); 

     // Returns response data 
     function getFeaturedComplete(response){ 
      return response.data; 
     } 

     // Prints error to console 
     function getFeaturedFailed(error) { 
      console.log('HTTP Request Failed for getFeatured: ' + error.data); 
     } 
     } 
    } 

工場からのデータを保持しているサービス

angular 
    .module('glossy') 
    .factory('sharedPostsService', sharedPostsService) 

    function sharedPostsService(){ 

     var listPosts = []; 

     return { 
     setPosts: function(posts){ 
      listPosts = posts; 
     }, 
     getPosts: function(){ 
      return listPosts; 
     } 
     }; 
    } 

ありませんユーザーがリンク先ページの投稿をクリックすると、クリックした記事に表示されているページに移動します。しかし、このページを更新すると、すべてのデータはなくなります。サービスを呼び出すと、空のオブジェクトになります。私は、データがリフレッシュを通じて持続することを確認するために、これを設定するにはどうすればよい

ポストコントローラ

angular 
    .module('glossy') 
    .controller('PostController', PostController) 

    PostController.$inject = ['$window', '$filter', '$stateParams', 'sharedPostsService']; 

    function PostController($window, $filter, $stateParams, sharedPostsService){ 

    var vm = this; 
    vm.postsList = sharedPostsService.getPosts(); 
    vm.postTitle = $stateParams.title; 
    vm.thisPost = filterPosts(); 

    function filterPosts() { 
     return $filter('filter')(vm.postsList, vm.postTitle); 
    }; 
    } 

？私はlocalStorageの使用について検討しましたが、私が見つけたすべてのことは、データのストリング化とキー値のペアの格納ということでした。

何か助けていただければ幸いです。

Answer 1

サービスを使用して、ページの更新時にデータを保持することはできません。

データが大きい場合はデータベースを使用し、それ以外の場合はsessionStorageまたはlocalStorageを使用します。あなたはalaSQLで見たいと思うかもしれません

return angular.fromJson(window.localStorage['data']);