将数据存储在Ionic应用程序的缓存中

我正在使用外部Wordpress Rest API作为我的Ionic应用程序的内容。将数据存储在Ionic应用程序的缓存中

这提供了多达500页从我的Wordpress网站喂养。如果用户在访问我的应用时无法访问互联网，有没有一种方法可以在执行应用程序构建之前填充应用程序缓存中的所有内容，以便每个页面都可以查看一些内容。

然后，也许以后，当他们获得互联网访问回页面可以更新？

来源

2016-06-28 me9867

如果你的目标是存储客户端和持久性数据，您不能使用仅为当前会话缓存数据的$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 
     } 

     } 
} 
])

来源

2016-06-28 11:36:01

w ^我必须进入每个500页来“生成”缓存，或者自动创建或填充某种方式吗？ – me9867

我已经更新了答案。您将从API中提取数据（数组），将其存储在localStorage中，然后在没有Internet连接的情况下将其用于应用程序。 –

首先创建一个服务

//设置缓存 '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'); 
    } 
} 

]);

来源

2016-06-28 11:35:33 Antonis

在app.js添加" cache : true,"这样的：

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

来源

2016-06-28 11:55:18 CrazyVK56

将数据存储在Ionic应用程序的缓存中

回答

相关问题