Question

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

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

所以，初始设置如下：

landingController

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

如何在AngularJS中刷新服务中的数据？

1 个答案: