將數據存儲在Ionic應用程序的緩存中

Question

我正在使用外部Wordpress Rest API作爲我的Ionic應用程序的內容。

這提供了多達500頁從我的Wordpress網站餵養。如果用戶在訪問我的應用時無法訪問互聯網，有沒有一種方法可以在執行應用程序構建之前填充應用程序緩存中的所有內容，以便每個頁面都可以查看一些內容。

然後，也許以後，當他們獲得互聯網訪問回頁面可以更新？

Answer 1

如果你的目標是存儲客戶端和持久性數據，您不能使用僅爲當前會話緩存數據的$cacheFactory。

您可以保存數據在localStorage。

做這樣的事情：

廠

.factory('Content', ['$http', Content]) 

function Content($http) { 

    function getcontent(callback, url) { 
     var articles = []; 
     var article = {}; 
     $http.get(url).success(function(response) { 
      if (response.content[0].length > 0) { 
       for (var i = 0; i < response.content[0].length; i++) { 
        article = { 
         title:response.content[0][i].title, 
         subtitle:response.content[0][i].subtitle 
        } 
        articles.push(article); 
       } 
      } else { 
       //  
      } 
     }).error(function() { 
      //   
     }).then(function() { 
      callback(articles); 
     });; 
    } 
    return { 
     getcontent: getcontent 
    } 
} 

控制器

.controller('ContentCtrl', ['$scope', '$http', '$timeout', 'Content', '$localStorage', 
    function($scope, $http, $timeout, Content, $localStorage) { 

     $scope.showContent = function() { 

       var url = WordPressUrl; 
       $timeout(function() { 
        Content.getcontent(function(data) { 
         $scope.getcontent = data; 
         var contentList = []; 
         data.forEach(function(localy) { 
          var oneArticle = { 
           title: localy.title, 
           subtitle: localy.subtitle 
          } 
          contentList.push(oneArticle); 
         }); 
         window.localStorage.setItem("ContentLocaly", JSON.stringify(contentList)); 
         // $localStorage.message = localStorage["ContentLocaly"]; 
        }, url); 
       }, 1000); 
     } 

      // $scope.showContent(); 

    } 
]) 

然後你就可以在其他的控制器使用。

 $scope.LocalyFeed = function() { 
      $scope.Wordpress = JSON.parse(localStorage["ContentLocaly"]); 
      console.log($scope.Wordpress); 
     // return $scope.Wordpress; 
     }; 

爲了檢查互聯網連接，你可以做這樣的事情。

廠

.factory('checkInternet', function() { 
    return function checkInternet() { 
     var haveInternet= true; 
     if (window.cordova) { 
      if (window.Connection) { 
       if (navigator.connection.type == Connection.NONE) { 
        haveInternet= false; 
       } 
      } 
     } 
     return haveInternet; 
    }; 
}) 

控制器

.controller('ExampleCtrl', ['$scope', '$http','checkInternet', 
    function($scope, $http, checkInternet) { 

     $scope.showSomething = function() { 
     var haveInternet= checkInternet(); 
     if (haveInternet== true) { 
     // do something 
     } else { 
     // do something else 
     } 

     } 
} 
]) 

Answer 2

首先創建一個服務

//設置緩存 'myCache'

myApp.factory('myCache', function($cacheFactory) { 
     return $cacheFactory('myData'); 
}); 

//在控制器

myApp.controller('myController', ['$scope', 'myCache', 

function ($scope, myCache) { 
    var cache = myCache.get('myData'); 

    if (cache) { // If there’s something in the cache, use it! 
    $scope.variable = cache; 
    } 
    else { // Otherwise, let’s generate a new instance 
    myCache.put(‘myData’, 'This is cached data!'); 
    $scope.variable = myCache.get('myData'); 
    } 
} 

]); 

Answer 3

在app.js添加" cache : true,"這樣的：

.state('app.yourPage', { 
    cache : true, 
    url: "/yourPage", 
    views: { 
      'menuContent': { 
      templateUrl: "templates/yourPage.html", 
      controller: 'YourPageCtrl' 
     } 
    } 
})