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

Question

我正在使用外部 Wordpress Rest API 作为我的 Ionic 应用程序的内容。

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

然后也许稍后当他们重新访问互联网时可以更新该页面？

Answer 1

先创建服务

// 设置缓存‘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 2

如果您的目标是存储客户端和持久数据，则不能使用 $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;
        };

For checking internet connection you can make something like this.

工厂

.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   
        }

        }
 }
])

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

Storing data in cache in an Ionic App

json

angularjs

angular-http

ionic-framework

wordpress-rest-api