在 AngularJS 中的页面之间传递数据 + 页面刷新 [英] Passing Data Between Pages in AngularJS + Page Refresh

问题描述

我试图在应用程序的结帐过程中的页面之间传递数据，但它没有按应有的方式工作.我做了一些阅读，大多数人都推荐使用服务，但唯一的问题是当页面刷新时(用户点击刷新或稍后返回)，服务中的所有数据都消失了.这是有道理的，因为服务中的数据并不意味着是持久的，而是会导致问题.

所以问题是:如何在 angularJS 中的页面之间传递数据，并且仍然保留页面刷新后传递的数据?

到目前为止，这是我的代码(尝试使用查询字符串):

.service('checkoutService',函数 checkoutService($location, Address, $routeParams, TicketGroup) {无功票_数量= 0;var ticket_group = {};var selected_address = {};this.loadInformation = function() {if(!ticket_quantity && $routeParams.ticket_quantity)ticket_quantity = $routeParams.ticket_quantity;if(!ticket_group && $routeParams.ticket_group_id)ticket_group = TicketGroup.get({id: $routeParams.ticket_group_id});if(!selected_address && $routeParams.address_id)selected_address = Address.get({id: $routeParams.address_id});}this.setTicketQuantity = 函数(数量){ticket_quantity = 数量；$location.path().search({ticket_quantity:quantity});}this.getTicketQuantity = 函数(){返程票_数量；}this.setTicketGroup = 函数(对象){票组=对象；$routeParams.ticket_group = object.id;}this.getTicketGroup = function() {返程票组；}this.setSelectedAddress = 函数(对象){selected_address = 对象；$routeParams.address_id = object.id;}this.getSelectedAddress = function() {返回 selected_address;}});

解决方案

有几个选项可以做到这一点，

1. 对于较小的数据集，您可以使用 $cookieStore，对于低于 4k 的数据
2. 另一种选择，尤其是对于大型数据集，将使用本地存储然后在页面加载/重新加载时检索数据.
3. 如果它只是非常少量的数据，或者在多个页面中使用的数据，您可以使用 $rootscope，但这不是最好的选择，因为它就像污染了全局名称空间.
4. 最后一个选项，根据数据的检索方式，可以实施服务，这基本上是一个可以传递到各种角度范围的单例.

注意:只有前两个是持久的.

就您而言，我认为使用本地存储或cookiestore将是您的最佳选择.您正在尝试使用一项服务，如果您不希望它是持久的(离开页面或页面刷新)，这将是合适的.服务是由 angular 管理的单例，在注入时，您将在每次注入中获得对同一对象的引用.然而，当返回页面时，这个单例需要重新初始化，从而丢失所有以前的数据.使服务持久化的唯一方法是从数据库、本地文件或其他地方的 noSQL 加载数据.但是，我认为这并不是您真正想要的.

如果您对本地存储实施感兴趣，请查看这些模块 angular-local-存储、ngStorage 或这个答案

如果您想使用 cookiestore，请查看此答案

I am trying to pass data between pages in the checkout process of an app but it's not working the way it should. I have done some reading and most people recommend using a service, but the only issue is that when the page is refreshed (user clicks refresh or comes back at a later time) all the data from the service disappears. This makes sense since the data in a service is not meant to be persistent but it is causing a problem.

So the question is: how can I pass data between pages in angularJS and still keep the data that was passed after a page refresh?

Here is my code so far (with my attempt at using query strings):

.service('checkoutService', 
          function checkoutService($location, Address, $routeParams, TicketGroup) {
    var ticket_quantity = 0;
    var ticket_group = {};
    var selected_address = {};

    this.loadInformation = function() {
        if(!ticket_quantity && $routeParams.ticket_quantity)
            ticket_quantity = $routeParams.ticket_quantity;
        if(!ticket_group && $routeParams.ticket_group_id)
            ticket_group = TicketGroup.get({id: $routeParams.ticket_group_id});
        if(!selected_address && $routeParams.address_id)
            selected_address = Address.get({id: $routeParams.address_id});
    }

    this.setTicketQuantity = function(quantity) {
        ticket_quantity = quantity;
        $location.path().search({ticket_quantity: quantity});
    }
    this.getTicketQuantity = function() {
        return ticket_quantity;
    }

    this.setTicketGroup = function(object) {
        ticket_group = object;
        $routeParams.ticket_group = object.id;
    }
    this.getTicketGroup  = function() {
        return ticket_group;
    }

    this.setSelectedAddress = function(object) {
        selected_address = object;
        $routeParams.address_id = object.id;
    }
    this.getSelectedAddress = function() {
        return selected_address;
    }
});

解决方案

There are several options to do this,

1. For smaller data sets you could use the $cookieStore, for data that is under 4k
2. Another option, especially with large data sets, would be to use Local Storage and then retrieve the data on page load/reload.
3. if it is only a very small amount of data, or data that is used through out multiple page you could use $rootscope, but this is not the best option as it just like polluting the global name space.
4. The last option, depending on how the data is retrieved, a service could be implemented, that is basically a singleton that can be passed to various angular scope.

Note: only the first two are persistent.

In your case I think that using local storage or the cookiestore will be you best options. You are trying to use a service, which would be appropriate if you did not want it to be persistent (leaving the page or a page refresh). Services are singletons that being managed by angular, when injected you will get a reference to the same object in each injection. However, when returning to the page this singleton will need to be re initialized, thus losing all previous data. The only way to make make a service persistent would be to load the data from a database, a local file, or noSQL from elsewhere. However, I do not think this is really what you are after.

If you are interested in pursuing the local storage implementation then look into these modules angular-local-storage, ngStorage or this answer

If you want to use the cookiestore look into this answer

这篇关于在 AngularJS 中的页面之间传递数据 + 页面刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！