我试图在应用程序的结账过程中在页面之间传递数据,但它没有按应有的方式工作。我已经阅读了一些内容,大多数人建议使用服务,但唯一的问题是,当刷新页面时(用户单击刷新或稍后返回),服务中的所有数据都会消失。这是有道理的,因为服务中的数据并不意味着是持久的,但它会导致问题。
所以问题是:如何在 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;
}
});
有多种选择可以做到这一点,
- 对于较小的数据集,您可以使用$cookieStore,对于 4k 以下的数据
- 另一种选择,尤其是对于大型数据集,是使用本地存储然后在页面加载/重新加载时检索数据。
- 如果它只是非常少量的数据,或者在多个页面中使用的数据,您可以使用 $rootscope,但这不是最好的选择,因为它就像污染全局名称空间一样。
- 最后一个选项,取决于数据的检索方式,service可以实现,这基本上是一个可以传递到各种角度范围的单例。
Note:只有前两个是持久的。
在你的情况下我认为使用本地存储 or the 饼干店将是您最好的选择。您正在尝试使用一项服务,如果您不希望它持久存在(离开页面或刷新页面),那么这将是合适的。服务是由角度管理的单例,注入时您将在每次注入中获得对同一对象的引用。但是,当返回页面时,该单例将需要重新初始化,从而丢失所有先前的数据。使服务持久化的唯一方法是从数据库、本地文件或其他地方的 noSQL 加载数据。但是,我认为这并不是您真正想要的。
如果您有兴趣追求本地存储实现,请查看这些模块角度本地存储, ng存储或这个answer
如果你想使用 cookiestore 看看这个answer
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)