如何在 AngularJS 中刷新时将数据保存在服务中？

Question

我正在为我的公司在几周内推出的一个新品牌创建一个新的多用途网站。我们使用 WordPress 后端并通过 WP REST API，现在能够解耦系统并将 NodeJS/Express/AngularJS 用于我们的前端和中间件应用程序。

目前，当我加载登录页面时，会向 WordPress 发出 HTTP GET 请求，以获取我们首页的所有相关帖子。然后将此数据传递给服务以跨控制器使用。

所以，初始设置是这样的：

着陆控制器

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

HTTP 请求工厂

    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。

存储数据：

window.localStorage['data'] = JSON.stringify(data);

检索数据：

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