CODEWITHSUNDEEP
javascriptjquerylocal-storage
anna
anna

Reputation: 21

localStorage clears on refresh, parse & stringify not working

Working on a practice app with localStorage, but the stored data is getting cleared on page refresh. Based on answers to similar questions, I've used JSON.stringify(); on setItem, and JSON.parse(); on getItem, but still no luck. Am I using those methods in the wrong way? For reference, #petType and #petName are input IDs, and #name and #type are ul IDs. Thanks!

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>");
});

Upvotes: 1

Views: 197

Answers (1)

tcooc
tcooc

Reputation: 21209

It appears to clear because you are not loading data from it when the page loads. There are multiple bugs in the code:

  • It appears that you're only saving the last added pet to localStorage, which would create inconsistent behaviour
  • Setting animalArray.length to 0 is incorrect
  • animalArray.push(type, name); is probably not what you want, since it adds 2 items to the array, do something like animalArray.push({type: type, name: name});
  • logPets can just use the in memory array, since it's identical to the one saved

Fixed code: 

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>");
});

A quick fiddle to demo it: https://jsfiddle.net/rhnnvvL0/1/

Upvotes: 1

Related Questions