Question

这是我使用的JSON文件：

    {
        "dat": [
            {
                "name": "Bill",
                "age": 20
            }
        ]
    }

这是我使用的实际来源（dumbed down to only the bug）。因此，请随意将其转换为HTML文件并进行修补。

    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    </head>
    <body>
    <div id="out"></div>
    <script type="text/javascript">

    /******************
     * Global Variables
     ******************/
    var counter = 1;  //Used to track users movement 
    var json;


    Storage.prototype.setObject = function(key, value) {
        this.setItem(key, JSON.stringify(value));
    }

    Storage.prototype.getObject = function(key) {
        var value = this.getItem(key);
        return value && JSON.parse(value);
    }


    function load(location, storageName)
    {
       $.ajax({
          url: location,
          dataType: "text",   //force to handle it as text
          success: function(data)
          {
            localStorage.setObject(storageName, JSON.parse(data));
          }
        })
    };

    /****************************
     * Pushes any content updates to the user.
     ****************************/

    function populate(Number)
    {
      $.each(json.dat, (function(key, value) 
        {
           $('#out').html('Name: ' + value.name + '<br> Age: ' + value.age);
        }))
    }


    /********************************
     * The main program
     ********************************/

    $(document).ready(function(){
     load('work.json', 'jsoncache');
     json = localStorage.getObject('jsoncache');
     populate(counter);

    })
    </script>
    </body>
    </html>

我遇到的问题是，第一次加载应用时，它会在控制台中引发错误。第二次加载它（只是点击刷新）它完全正常。

我在更改数据和刷新时发现了这个问题。如果我更改了数据并刷新了，localStorage将加载并更新数据，但屏幕上显示的文本将是相同的。再次点击刷新，屏幕上的文本将显示新数据（上次刷新页面时加载的数据）。

我发现的另一件事是，如果你在没有localStorage已经存在的情况下运行应用程序，它会抛出一个不同的错误。任何人都知道这件事吗？

我不确定这是我的代码中的错误还是浏览器的问题。有什么想法吗？

Answer 1

您尝试在AJAX请求返回之前从localStorage获取该项，因此，在您尝试访问json.dat时，在populate方法中，您会收到错误，因为json是undefined。但第二次，异步请求已经存储了对象，因此它可以工作。将您的加载功能更改为：

function load(location, storageName)
{
   $.ajax({
      url: location,
      dataType: "text",   //force to handle it as text
      success: function(data)
      {
        json = JSON.parse(data); //Why don't you use 'json' dataType directly?
        localStorage.setObject(storageName, json);
        populate(counter);
      }
    })
};

在load（）调用（或检查错误）后，从ready（）方法中删除所有内容

JSON和localStorage问题

1 个答案: