angularjs - 在 AngularJS 中的页面之间传递数据 + 页面刷新

Question

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

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

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

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

Answer 1

有几种选择可以做到这一点，

对于较小的数据集，您可以使用 $cookieStore , 对于 4k 以下的数据

另一种选择是使用 Local Storage，尤其是对于大型数据集。然后检索页面加载/重新加载的数据。

如果它只是非常少量的数据，或者通过多个页面使用的数据，您可以使用 $rootscope，但这不是最好的选择，因为它就像污染全局 namespace 一样。

最后一个选项，取决于如何检索数据，service可以实现，这基本上是一个可以传递给各种 Angular 范围的单例。

注:只有前两个是持久的。

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

如果您对实现本地存储感兴趣，请查看这些模块 angular-local-storage , ngStorage或者这个 answer

如果您想使用 cookiestore，请查看 answer