如何在AngularJS中保存web api数据

Question

我已经创建了一个工厂作为服务来使用Web API调用从服务器获取一些数据，但是如果我需要再次获取相同的数据，我需要再次点击API，我想在更远的地方使用相同的数据并且不想再次进行Web API调用。

有没有什么办法来保持角js中的数据？

Answer 1

方式在整个应用程序共享数据：

使用服务

我们可以创建一个服务set和get的controllers之间，然后将数据在我们想要使用它的控制器功能中注入该服务。

服务：

app.service('setGetData', function() { 
    var data = ''; 
    getData: function() { return data; }, 
    setData: function(requestData) { data = requestData; } 
}); 

控制器：

app.controller('myCtrl1', ['setGetData',function(setGetData) { 

    // To set the data from the one controller 
    var data = 'Hello World !!'; 
    setGetData.setData(data); 

}]); 

app.controller('myCtrl2', ['setGetData',function(setGetData) { 

    // To get the data from the another controller 
    var res = setGetData.getData(); 
    console.log(res); // Hello World !! 

}]); 

在这里，我们可以看到，myCtrl1用于设置数据和myCtrl2用于获取数据。因此，我们可以将数据从一个controller分享到another controller，而无需进行任何其他API调用。

2.使用会话存储

创建工厂服务，将保存并返回基于密钥的保存会话数据。

app.factory('storageService', ['$rootScope', function($rootScope) { 

    return { 
     get: function(key) { 
      return sessionStorage.getItem(key); 
     }, 
     save: function(key, data) { 
      sessionStorage.setItem(key, data); 
     } 
    }; 
}]); 

控制器：

注入在控制器中的storageService依赖性set和get从会话存储器中的数据。

app.controller('myCtrl',['storageService',function(storageService) { 

    // Save session data to storageService 
    storageService.save('key', 'value'); 

    // Get saved session data from storageService 
    var sessionData = storageService.get('key'); 

}); 

Answer 2

您可以使用HTML5 Web Storage。

localStorage.setItem("lastname", "Smith"); 
console.log(localStorage.getItem("lastname")); 

Answer 3

，如果你让你的服务，你就获取数据内部的异步调用是“静态”是有道理的缓存它们，以避免新的开销，每次需要的时候。缓存默认是禁用的。

$http({ 
method: 'GET', 
cache: true 
}