javascript - 获取 json 文件时出错

Question

我有一个 javascript 文件，旨在获取 json 文件，如果成功，它将执行一个功能，如果不成功，它将显示一个警告窗口，提示“错误”，但尽管语法看起来正确，但我每次都会收到一个带有错误的警报窗口。

这是两个文件

var firstName = [];
var lastName = [];
var email = [];
var password = [];
var i;

function insertRecord() {
$.ajax({
    type: "GET",
    url: "studio.json",
    dataType: "json",
    success: insertData,
    error: function(){ alert("error"); }
});

function insertData(data) {
    if (localStorage) {
        for (i = 0; i < data.User.length; i++) {
            localStorage.setItem(firstName[i], data.User.firstName[j]);
            localStorage.setItem(lastName[i], data.User.lastName[j]);
            localStorage.setItem(email[i], data.User.email[j]);
            localStorage.setItem(password[i], data.User.password[j]);
        }

        localStorage.setItem(firstName[i], document.getElementById("firstName").value);
        localStorage[firstName[i]] = document.getElementById("firstName").value;
        localStorage.setItem(lastName[i], document.getElementById("lastName").value);
        localStorage[lastName[i]] = document.getElementById("lastName").value;
        localStorage.setItem(email[i], document.getElementById("email").value);
        localStorage[email[i]] = document.getElementById("email").value;
        localStorage.setItem(password[i], document.getElementById("password").value);
        localStorage[password[i]] = document.getElementById("password").value;

        alert(localstorage[firstName]);
    }

    else
        alert("Your browser does not support Local Storage");
}

}

json 文件名为 studio.json

{
    "Students":[
           { "first":"Arnold", "last":"Matthews", "class":"Tiny Tutus" },
           { "first":"Keesha", "last":"Franklin", "class":"Breakdancing"},
           { "first":"Dorothy", "last": "Ann", "class":"Acro"},
           { "first":"Wanda", "last": "Li", "class":"Ballet"},
           { "first":"Phoebe", "last": "Terese", "class":"Tap"}
    ],
    "Classes":[
        { "name":"Tiny Tutus", "time":"450","AMPM":"PM", "students":12},
        { "name":"Breakdancing", "time":"230","AMPM":"PM", "students":6},
        { "name":"Acro", "time":"810","AMPM":"AM", "students":15},
        { "name":"Tap", "time":"520","AMPM":"PM", "students":11},
        { "name":"Ballet", "time":"620","AMPM":"PM", "students":15},
        { "name":"Jazz", "time":"740","AMPM":"AM", "students":8 }
    ],
    "User":[
        {
        "firstName": "Michael",
        "lastName": "Jones",
        "username": "MJone",
        "email": "Michael.Jones@email.com",
        "password": "qwerty"
        },
        {
        "firstName": "Michelle",
        "lastName": "Lee",
        "username": "MLee",
        "email": "Michelle.Lee@gmail.com",
        "password": "asdfgh"
        },
        {
        "firstName": "Andrew",
        "lastName": "Bob",
        "username": "ABob",
        "email": "Andrew.Bob@hotmail.com",
        "password": "zxcvbn"
        }
    ]
}

Answer 1

您知道可以只存储 JSON 字符串，然后再解析它吗？

function storeUser() {
    return $.ajax({
        type: "GET",
        url: "studio.json",
        dataType: "text"
    });
}

if ( ! localStorage.getItem('user') ) {
    storeUser().done(function(json) {
        user = JSON.parse( json );
        localStorage.setItem('user', json);
    });
}else{
    user = JSON.parse( localStorage.getItem('user') );
}

但您必须等待异步调用再次完成!

MDN 还有一个 polyfill对于 localStorage，因此它也适用于不支持的浏览器。