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

Question

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

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

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 数组呢？

Answer 1

我们知道您的数据检索工作正常，因为它通过了使用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