Angular页面刷新后无法获取homeService，如何恢复服务引用？

我看你遇到了页面刷新后homeService状态丢失的问题——路由能正常工作，但服务里的数据全没了对吧？这其实是AngularJS的常见问题，咱们一步步来解决它。

首先先指出你代码里的一个小语法错误，这个可能会导致服务注入失败：你的homeController依赖数组里，'GoogleSignin'后面少了个逗号，先修正这个：

angular.module('xyz.homeController', [])
.controller('homeController', ['homeService', '$scope', '$location', '$modal', '$rootScope', '$localstorage', '$window', 'GoogleSignin', // 补全缺失的逗号
function(homeService, $scope, $location, $modal, $rootScope, $localstorage, $window, GoogleSignin) { 
  // 你的控制器逻辑
}])

问题根源 #

AngularJS的服务虽然是单例，但页面刷新会让整个应用重新初始化，服务内存里的所有数据都会被清空。你现在的homeService只把数据存在内存里，刷新后自然就丢失了，所以必须把状态持久化到本地存储（你已经注入了$localstorage，正好能用它）。

修正后的homeService代码 #

调整服务的逻辑，在set方法里把数据同步到本地存储，初始化时优先从本地读取数据，这样刷新后就能恢复之前的状态：

angular.module('xyz.homeService', [])
.factory('homeService', ['$localstorage', function($localstorage) {
  var data = {};
  
  // 初始化时从本地存储加载数据，没有则用默认值
  var deliveryOption = parseInt($localstorage.get('deliveryOption')) || 0;
  var payCardOption = parseInt($localstorage.get('payCardOption')) || 0;
  var orderId = $localstorage.get('orderId') || '';
  var restaurentID = $localstorage.get('restaurentID') || '';
  var orderInfo = JSON.parse($localstorage.get('orderInfo')) || {};
  var orderItems = JSON.parse($localstorage.get('orderItems')) || [];

  // 带本地存储同步的set/get方法
  data.setDeliveryOption = function(info) { 
    this.deliveryOption = info; 
    $localstorage.set('deliveryOption', info);
  };
  data.getDeliveryOption = function() { 
    return this.deliveryOption; 
  };

  data.setOrderId = function(orderId) { 
    this.orderId = orderId; 
    $localstorage.set('orderId', orderId);
  };
  data.getOrderId = function() { 
    return this.orderId; 
  };

  data.setRestaurentId = function(id) { 
    this.restaurentID = id; 
    $localstorage.set('restaurentID', id);
  };
  data.getRestaurentID = function() { 
    return this.restaurentID; 
  };

  data.setOrderInfo = function(info) { 
    this.orderInfo = info; 
    $localstorage.set('orderInfo', JSON.stringify(info)); // 对象转字符串存储
  };
  data.getOrderInfo = function() { 
    return this.orderInfo; 
  };

  data.setOrderItems = function(items) { 
    this.orderItems = items; 
    $localstorage.set('orderItems', JSON.stringify(items)); // 数组转字符串存储
  };
  data.getOrderItems = function() { 
    return this.orderItems; 
  };

  data.setPayCardOption = function(payCardOption) { 
    this.payCardOption = payCardOption; 
    $localstorage.set('payCardOption', payCardOption);
  };
  data.getPayCardOption = function() { 
    return this.payCardOption; 
  };

  return data;
}]);

关键说明 #

1. 本地存储的类型限制：$localstorage只能存字符串，所以对象和数组要先用JSON.stringify转成字符串，读取时用JSON.parse转回来。
2. 数字类型处理：从本地存储读取数字时要转成parseInt，避免变成字符串类型导致逻辑错误。
3. 依赖注入：确保$localstorage对应的模块（比如angular-local-storage）已经正确引入并注入到你的主应用模块里。

这样修改后，每次调用服务的set方法时，数据都会自动存在本地存储里；页面刷新后，服务初始化时会从本地读取之前保存的数据，状态就恢复了。你在控制器里正常注入homeService，就能像之前一样使用它的方法，而且刷新后数据不会丢失了。

内容的提问来源于stack exchange，提问作者Mrugesh