Question

使用localStorage处理练习应用程序，但在页面刷新时清除存储的数据。根据类似问题的答案，我使用了JSON.stringify（）;在setItem和JSON.parse（）;在getItem上，但仍然没有运气。我是以错误的方式使用这些方法吗？作为参考，＃typeType和#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, name: name});
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/

localStorage在刷新，解析和清除时清除stringify无效

1 个答案: