CODEWITHSUNDEEP
javascriptjqueryhtmllocal-storage
Mike Hawk
Mike Hawk

Reputation: 87

text loaded from localStorage goes away on refresh

There is a bootstrap modal which takes 3 inputs: Name,image, and description. I have figured out how to save everything to local storage and load the form inputs to my webpage, however, the text elements disappear on refresh so I'm hoping I can get tips regarding this. 

apply.onclick = function () {                       //function executed when form submitted
    var name = document.getElementById("name2").value;      //save name to a var
    var description = document.getElementById("description2").value;
    localStorage.setItem("name", name);                    //set name to localStorage
    localStorage.setItem("description", description);

    updateProduct(); //function to load into divs from local storage
}

function updateProduct(){
    $("#title2").html(localStorage.name);
    $("#desc2").html(localStorage.description); //load name&desciption into divs
}

This successfully sets the name and description in their respective divs, but once the page refreshes the text is erased and reset to whatever it was before "apply" was clicked. Is there a different method for saving & loading from local storage I should be using?

Upvotes: 1

Views: 352

Answers (1)

Kyle Richardson
Kyle Richardson

Reputation: 5645

You will need to invoke the updateProduct function when your page loads. Currently you're only invoking it in the onclick handler from what you've shown here.

You can this by applying the following technique:

document.onreadystatechange = function () {
    if (document.readyState == "interactive") {
        initApplication();
    }
}

Anything that you want to be applied during application initialization should be in your initApplication function that you define.

You can read about this here on MDN.

Upvotes: 1

Related Questions