Codepen localStorage not working with Jquery

Codepen localStorage not working with Jquery
0

#1

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.


#2

Can you walk us through exactly how to recreate the issue? What steps must we take to see the problem you describe? What should it be doing vs what it is doing? My point is you need to be more specific and tell us in detail what you mean by “it is not working”. We have no idea what you are expecting it to do unless you tell us. Then, we can examine your code to look for the issue. Also, if you have a specific line number you can reference to look at, that would be very helpful also.

Thank you.


#3

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

#4

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!


#5

See what @lasjorg posted earlier for how to correctly set and get local storage variables values. Honestly, I would not recommend putting the html into local storage. Why not create a global data array which will store the income and expense totals.

You will need to initialize it the first time to [0, 0] and the best time to do that, is when the first page loads. Upon the page loading, you would check to see if a local storage variable named data exists and if it does, then assign the data variable in local storage to it (you will need to parse it first) . If local storage variable does not exist (like the first time the page loads for a user), that is when you would set your global data variable to [0, 0].

Then, anytime you make any calculations (adding or deleting), you update the totals in this data array and then do three things:

  1. Update the applicable total fields on the page
  2. Update the chart
  3. Update local storage with the latest data array.

In general, try not to use DOM elements (other than input elements) when making calculations on data. Try to use a data structure to store the data, make adjustments to, and finally use the data structure for use in displaying the data. It will make your code easier to modify, because you separate the presentation of the data from the data itself.

Hopefully, you will find this suggestion useful. If you have any questions about what I have written, just ask.