JavaScript $ http.get一个json数组并将其存储在localstorage中

时间:2015-01-29 15:02:53

标签: javascript arrays json local-storage ionic-framework

我正在尝试接收json数组并将其存储在本地存储中。 我见过这样的问题,但他们无法帮助我。所以我想尝试自己的问题。我正在开发Ionic Framework。

我的控制器包括以下内容:

app.controller('QuestionsCtrl', function($scope, $http, $stateParams, $localstorage) {

$scope.getData = function() {

// get the json
   $http.get("data/fragenArray.json")
        .success(function(data) {

        //output of json as a string  -> correct
        console.log('data: ' + JSON.stringify(data));

        // store json in local storage
        $localstorage.setObject('fragenset', data);

        // restore json from local storage
        var post = $localstorage.getObject('fragenset');

        // output of local storage item -> incorrect
        // I got: Test xxx: [object Object]
        console.log('Test xxx: ' + post);
     })
     .error(function(data) {
            alert("ERROR");
        });
    }
 });

存储我得到的json:

angular.module('utils', [])

 .factory('$localstorage', ['$window', function($window) {
   return {
     set: function(key, value) {
       $window.localStorage[key] = value;
     },
     get: function(key, defaultValue) {
       return $window.localStorage[key] || defaultValue;
     },
     setObject: function(key, value) {
       $window.localStorage[key] = JSON.stringify(value);
     },
     getObject: function(key) {
       return JSON.parse($window.localStorage[key] || '{}');
     }
   }
 }]);

所以我决定在没有http.get请求的情况下尝试:

app.run(function($localstorage, $http) {
   $localstorage.setObject('post', {"fragen":[
    {
        "id":"1",
        "frage":"Wie ist das Wetter?",
        "antworten": {
            "a_1":"gut",
            "a_2":"schlecht"
        }
    },
    {
        "id":"2",
        "frage":"Wie geht es dir?",
        "antworten": {
            "a_1":"gut",
            "a_2":"schlecht"
        }
    }
 ]});
   var post = $localstorage.getObject('post');
   console.log(post);
 })

结果正是我所期待的 - 一个json对象。

那么如何才能正确存储http.get中的json数组呢?

1 个答案:

答案 0 :(得分:0)

我们知道您的数据检索工作正常,因为它通过了使用JSON.stringify()编写的测试:

// get the json
   $http.get("data/fragenArray.json")
        .success(function(data) {

        //output of json as a string  -> correct
        console.log('data: ' + JSON.stringify(data));

        // store json in local storage
        $localstorage.setObject('fragenset', data);

        // restore json from local storage
        var post = $localstorage.getObject('fragenset');

        // output of local storage item -> incorrect
        // I got: Test xxx: [object Object]
        console.log('Test xxx: ' + post);
     })

最后一次测试是一次糟糕的测试。这不是错误的结果。测试编码不正确。

这是因为您无法通过将对象附加到字符串来检查对象。

如果X是一个对象,那么无论X包含什么, 也许X = {'a': 123}

console.log("anything "+X); 
// --> "anything [object Object]"

这是因为"anything "+X是一个字符串表达式,当一个对象被强制转换为字符串时,Javascript用字符串“[object Object]”替换该对象

以下是您应该测试的内容:

 //output of storage as a json string  
 console.log('post: ' + JSON.stringify(post));

最后

 // json string of storage matches json string of input data
 console.log(JSON.stringify(data)===JSON.stringify(post));
 // will yield true or false