I am having problems with LocalStorage. I have a budget app that calculates income and expenses and I want to save it to local storage each time you type in an amount. Then It also uploads the new local storage body when the window loads. Its all working great except that the javascript functions that use jquery don’t function after the localStorage has loaded on the page.
heres the link to my code.
I’m not sure if this is what you are trying to do (looks like it), but it won’t work, at least not the way you want it to.
function saveLS(){
const bodyHTML = document.getElementById('body').innerHTML;
localStorage.setItem('budget', bodyHTML);
}
function loadLS(){
const localHTML = localStorage.getItem('budget').trim();
document.getElementById('body').innerHTML= localHTML;
}
Yes sorry about that, I’m doing this so that you can create income and expense fields, calculate their totals, then most importantly save what you’ve done for later.
Every time a number is typed in one of the amount fields, it calculates its total then preforms the saveLS() function which saves the page innerHTML to the localStorage.body.
When the window loads it preforms the function loadLS() which changes the innerHTML of the body id to localStorage.body. That way you don’t have to enter the same income and expense values every time you leave the window.
The whole thing works fine except that after the page loads the functions that use jquery in them dont work for some reason.
To better see the problem once the page loads look at the page. if you click the income expense or home buttons on the top it should open those sections but it doesn’t. if you click on the income trash button however it still removes that income div. (the openHome() openIncome() and openExpense() functions don’t work, but a couple other functions like removeSingle(element) still work) The only difference that Ive found between the functions that work and that dont is that the ones that dont work use jquery while the others dont.
If you want to see more of what the whole thing if supposed to do you can delete the window.onload(loadLS()); function on line 188. This stops the page from updating to the localStorage.body version so it works well except that if you leave the page it looses all the user inputs that had been added.
Again the issue im guessing has to be something to do with localStorage and Jquery not working well together after the page loads localStorage.body.
hopefully that’s a little more clear, if not let me know and Ill try to explain in more detail. Thank you so much!