javascript - 刷新时清除本地存储，解析和字符串化不起作用

Question

正在使用 localStorage 开发练习应用程序，但存储的数据在页面刷新时被清除。根据类似问题的答案，我使用了 JSON.stringify();在 setItem 和 JSON.parse() 上；在 getItem 上，但仍然没有运气。我是否以错误的方式使用这些方法？作为引用，#petType 和 #petName 是输入 ID，#name 和 #type 是 ul ID。谢谢!

var animalArray = [];

var addPet = function(type,name) {

    var type = $("#petType").val();
    var name = $("#petName").val();
    localStorage.setItem("petType", JSON.stringify(type));
    localStorage.setItem("petName", JSON.stringify(name));

    animalArray.push(type,name);
};

var logPets = function() {

    animalArray.forEach( function(element,index) {
        //empty array
        animalArray.length = 0;
        //empty input
        $("input").val("");

        var storedName = JSON.parse(localStorage.getItem("petName"));
        var storedType = JSON.parse(localStorage.getItem("petType"));

        //append localStorage values onto ul's
        $("#name").append("<li>" + storedName + "</li>");
        $("#type").append("<li>" + storedType + "</li>");
    });
};

//click listPets button, call logPets function
$("#listPets").on("click", function() {
    logPets();
    $("#check").html("");
});

//click enter button, call addPet function
$("#enter").on("click", function() {
    addPet(petType,petName);
    $("#check").append("<i class='fa fa-check' aria-hidden='true'></i>");
});

Answer 1

它看起来很清晰，因为页面加载时您没有从中加载数据。代码中存在多个错误:

• 您似乎只是将最后添加的宠物保存到 localStorage，这会导致行为不一致
• 将 animalArray.length 设置为 0 是不正确的
• animalArray.push(type, name); 可能不是您想要的，因为它向数组添加了 2 个项目，请执行类似 animalArray.push({type: type,姓名:姓名});
• logPets 只能使用内存数组，因为它与保存的数组相同

固定代码:

var storedArray = localStorage.getItem("animalArray");
var animalArray = [];
if(storedArray) {
    animalArray = JSON.parse(storedArray);
}

var addPet = function(type,name) {
    var type = $("#petType").val();
    var name = $("#petName").val();
    animalArray.push({type: type, name: name});
    localStorage.setItem("animalArray", JSON.stringify(animalArray));
};

var logPets = function() {
    animalArray.forEach( function(element,index) {
        //empty input
        $("input").val("");
        //append localStorage values onto ul's
        $("#name").append("<li>" + element.name + "</li>");
        $("#type").append("<li>" + element.type + "</li>");
    });
};

//click listPets button, call logPets function
$("#listPets").on("click", function() {
    logPets();
    $("#check").html("");
});

//click enter button, call addPet function
$("#enter").on("click", function() {
    addPet(petType,petName);
    $("#check").append("<i class='fa fa-check' aria-hidden='true'></i>");
});

快速演示它:https://jsfiddle.net/rhnnvvL0/1/