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

时间:2014-09-17 22:04:25

标签: angularjs

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

所以问题是:如何在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;
    }
});

2 个答案:

答案 0 :(得分:15)

有几种方法可以做到这一点,

  1. 对于较小的数据集,您可以使用$cookieStore,用于4k以下的数据
  2. 另一个选项,特别是对于大型数据集,将使用Local Storage,然后在页面加载/重新加载时检索数据。
  3. 如果只是非常少量的数据,或者通过多页使用的数据,你可以使用$ rootscope,但这不是最好的选择,因为它就像污染全局名称空间一样。
  4. 最后一个选项,取决于如何检索数据,可以实现service,这基本上是可以传递到各种角度范围的单例。
  5. 注意:只有前两个是持久的。

    在您的情况下,我认为使用本地存储 cookiestore 将是您的最佳选择。您正在尝试使用服务,如果您不希望它是持久的(保留页面或页面刷新),这将是合适的。服务是由角度管理的单例,当注入时,您将在每次注入时获得对同一对象的引用。但是,当返回到页面时,需要重新初始化此单例,从而丢失所有先前的数据。使服务持久化的唯一方法是从其他地方加载来自数据库,本地文件或noSQL的数据。但是,我认为这不是你想要的。

    如果您有兴趣继续本地存储实施,请查看这些模块angular-local-storagengStorage或此answer

    如果您想使用cookiestore,请查看此answer

答案 1 :(得分:0)

您可以使用Session / LocalStorage。或者像pounchdb这样的浏览器数据库。 Seseion存储:存储会话数据; LocalStorage:存储数据而不仅仅是会话范围 pounchdb:脱机数据库