如何在AngularJS中持续存在Web API数据

Question

我创建了一个工厂作为服务，以使用Web API调用从服务器获取一些数据，但是如果我需要再次获取相同的数据，我需要再次击中API，我想在其他地方使用相同的数据，不想再次进行Web API调用。

有什么方法可以在Angular JS中持续数据？

Answer 1

在整个应用程序上共享数据的方法：

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用于获取数据。因此，我们可以像这样不用其他API调用而共享一个controller到another controller的数据。

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

如果您在服务内部进行异步调用，并且要获取的数据是"静态的"，则可以缓存它们，以避免每次需要新开销。默认情况下禁用缓存。

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

Answer 3

您可以使用HTML5 Web Storage为此。

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