Javascript Angular Js：如何避免在页面刷新时丢失$http调用的数据？

前提：

我知道在StackOverflow上也有类似的问题，如果我问这个问题是因为解决方案在我的情况下不起作用（或者我不能正确地应用它们）

情况：

   // Initialising the markers array.
  $scope.markers= [];

  // Getting the list of markers through $http call.
  $http({
    url: 'main/json_get_markers',
    method: "POST",
   }).success(function (data) {
        $scope.markers = data;
     });

我有一个带有地图和一系列标记的Angular js应用程序，从数据库中检索数据和位置。该应用程序运行良好。我使用的是角度gm模块：我非常喜欢它。 当我点击导航链接时，我被重定向到地图的正确页面，我看到了地图上的所有标记

问题是，当我刷新页面时，我丢失了所有标记，因为标记是通过$http调用检索的

代码：

   // Initialising the markers array.
  $scope.markers= [];

  // Getting the list of markers through $http call.
  $http({
    url: 'main/json_get_markers',
    method: "POST",
   }).success(function (data) {
        $scope.markers = data;
     });

可能的解决方案：

   // Initialising the markers array.
  $scope.markers= [];

  // Getting the list of markers through $http call.
  $http({
    url: 'main/json_get_markers',
    method: "POST",
   }).success(function (data) {
        $scope.markers = data;
     });

在StackOverflow和google中搜索，我找到了一些可能的解决方案：

使用$route.reload（）

如果这是正确的解决方案，那么问题是： 如何准确应用$route.reload（）；在这种情况下？因为我不知道该把它放在哪里。如果我把它放在控制器中，它将生成一个无限循环，这意味着页面将持续刷新。。那么到底应该把球放在哪里呢

使用存储模块： 我看到它在演示中运行得很好，但我尝试将其应用到我的案例中，但未能获得任何结果。 因此，如果这是正确的解决方案，那么问题将是：如何重写$http调用以将结果保存到$localStorage中

---

好的，根据@jaredReeves的建议，我提出了这个解决方案：

我已申报一项服务：

myApp.factory('markersRepository', function($http) 
{
  return 
  {
    getAllMarkers: function() 
    {
        var url = "main/json_get_markers";
        return $http.get(url);
    }
  };
});

并将其注入控制器：

function MapController ($scope, markersRepository) 
{
  markersRepository.getAllMarkers().success(function(markers) {$scope.markers= markers});
}

它正在工作。当我刷新页面时，标记仍然存在

老实说，它在95%的时间里都在工作，有时我会刷新并且没有标记。在这种情况下，我必须等待几秒钟，然后再次刷新。然后会出现标记（但我不知道为什么…）

反正我的问题基本上解决了。 我不知道这是否是最好的解决方案。

---

如果您有更好的解决方案，我会将您的答案标记为正确。

好的，我认为如果您进行这些更改，它应该可以解决剩余的问题，因为它不会始终加载数据

myApp.factory('markersRepository', function($http){ 
    var markersRepository = {
       getAllMarkers: function(){
           var url = "main/json_get_markers";
           var promise = $http.get(url).then(function(response){
               return response.data;
           });
           return promise;
       }
    };
    return markersRepository;
});  

function MapController ($scope, markersRepository){
    markersRepository.getAllMarkers().then(function(markerData){
        $scope.markers= markerData
    });
});

---

我希望这有帮助——干杯

您是否尝试过创建一个获取标记数据并将其注入控制器的服务？请记住，服务是单例的，应该能够维护检索到的数据。

$route.reload

在深度重新加载（例如

f5

）的情况下不起作用

localStorage

只能包含文本数据，因此您必须使用

JSON.stringify

/

JSON.parse

。感谢@JaredReeves提供的提示。我现在正试图做一些服务，但我无法使它工作。您能为这个特殊的案例做一个代码示例吗？谢谢@arturgrzesiak。你能用你的解决方案重写代码吗？我尝试过$scope.markers=JSON.stringify（数据）；但是这不是正确的方法。这里有一个例子可以帮助您为您的特定案例开发服务。直到今晚晚些时候，我才有时间提供一个例子。在它不起作用的情况下，可能是因为数据在页面加载后返回，并且angular没有更新。您可以使用apply强制更新，或者更好地将服务转换为使用诸如read up on$q之类的承诺。这里非常感谢您的帮助！它的工作完美的100%的时间！我不知道承诺。只有一件事：在（$http）之后的第一行中缺少一个{。我试图编辑，但无法提交编辑。再次感谢！很抱歉我进行了编辑（{）。很高兴听到它对您有用。承诺和服务都非常有用。如果您是angular的新手，我建议您真正了解服务、指令和路由，因为它们是angular中最强大的功能之一。