如何在AngularJS中刷新时将数据持久保存在服务中? [英] How to persist data in a service on refresh in AngularJS?

问题描述

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

I'm creating a new multi-use website for a new brand my company is launching in a few weeks. We use a WordPress backend and via the WP REST API, are now able to uncouple the system and use NodeJS/Express/AngularJS for our front end and middleware applications.

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

Currently, when I load the landing page, an HTTP GET Request is made to WordPress for all of the relevant posts for our front page. This data is then passed to a service to be used across controllers.

因此，初始设置是这样:

So, the initial set up is this:

landingController

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

现在，当用户单击登录页面上的帖子时，她将被带到一个在其单击的文章上显示的页面，该页面可以正常工作.但是，如果她刷新此页面，则所有数据都将消失.调用该服务将导致一个空对象.

Now, when a user clicks on a post on the landing page, she is taken to a page that displays on the article that she clicked on, which works. However, if she refreshes this page, all the data is gone. Calling the service results in an empty object.

后置控制器

   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的过程，但是发现的所有内容都涉及到对数据进行字符串化并将其存储在键值对中?

How do I set this up to ensure that the data persists through refresh? I looked into using localStorage but everything I found said it involved stringifying data and storing it in key value pairs?

感谢您的帮助.

推荐答案

您不能使用服务将数据持久保存在页面刷新上.

You cannot use a service to persist data on a page refresh.

如果数据量较大，则使用数据库，否则使用 sessionStorage 或 localStorage .

If the data is large use a database, else use sessionStorage or localStorage.

存储数据:

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

检索数据:

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

这篇关于如何在AngularJS中刷新时将数据持久保存在服务中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！