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

JavaScript $http.get an json array and store it in localstorage

本文关键字：存储 localstorage 数组 http get 一个 json JavaScript      更新时间：2023-09-26

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

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

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

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